From 75f0da9c35182c49f360bd03ac64b5867bf80cd3 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 6 Nov 2024 18:29:15 +1000
Subject: [PATCH] fix(ui): use revised uploader for CL empty state

---
 .../ControlLayerSettingsEmptyState.tsx        | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx
index 2d475ba474..e8f0bbaeec 100644
--- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx
@@ -1,22 +1,25 @@
 import { Button, Flex, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppStore } from 'app/store/nanostores/store';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { replaceCanvasEntityObjectsWithImage } from 'features/imageActions/actions';
 import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback } from 'react';
 import { Trans } from 'react-i18next';
-import type { PostUploadAction } from 'services/api/types';
+import type { ImageDTO } from 'services/api/types';
 
 export const ControlLayerSettingsEmptyState = memo(() => {
   const entityIdentifier = useEntityIdentifierContext('control_layer');
-  const dispatch = useAppDispatch();
+  const { dispatch, getState } = useAppStore();
   const isBusy = useCanvasIsBusy();
-  const postUploadAction = useMemo<PostUploadAction>(
-    () => ({ type: 'REPLACE_LAYER_WITH_IMAGE', entityIdentifier }),
-    [entityIdentifier]
+  const onUpload = useCallback(
+    (imageDTO: ImageDTO) => {
+      replaceCanvasEntityObjectsWithImage({ imageDTO, entityIdentifier, dispatch, getState });
+    },
+    [dispatch, entityIdentifier, getState]
   );
-  const uploadApi = useImageUploadButton({ postUploadAction });
+  const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
   const onClickGalleryButton = useCallback(() => {
     dispatch(activeTabCanvasRightPanelChanged('gallery'));
   }, [dispatch]);