From 231b7a5000445db3eba724d4c633fa9f5fda27ce Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sun, 17 Sep 2023 12:08:35 +1200
Subject: [PATCH] fix: Upload not working correctly on the ip Adapter image
 upload

---
 .../ipAdapter/ParamIPAdapterImage.tsx         | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx b/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx
index 97942df0a7..ed92705c23 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx
@@ -3,7 +3,7 @@ import { skipToken } from '@reduxjs/toolkit/dist/query';
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
-import IAIIconButton from 'common/components/IAIIconButton';
+import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import { ipAdapterImageChanged } from 'features/controlNet/store/controlNetSlice';
 import {
@@ -14,6 +14,7 @@ import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaUndo } from 'react-icons/fa';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
+import { PostUploadAction } from 'services/api/types';
 
 const ParamIPAdapterImage = () => {
   const ipAdapterInfo = useAppSelector(
@@ -49,6 +50,13 @@ const ParamIPAdapterImage = () => {
     []
   );
 
+  const postUploadAction = useMemo<PostUploadAction>(
+    () => ({
+      type: 'SET_IP_ADAPTER_IMAGE',
+    }),
+    []
+  );
+
   return (
     <Flex
       sx={{
@@ -62,7 +70,8 @@ const ParamIPAdapterImage = () => {
         imageDTO={imageDTO}
         droppableData={droppableData}
         draggableData={draggableData}
-        isUploadDisabled={true}
+        postUploadAction={postUploadAction}
+        isUploadDisabled={!isIPAdapterEnabled}
         isDropDisabled={!isIPAdapterEnabled}
         dropLabel={t('toast.setIPAdapterImage')}
         noContentFallback={
@@ -72,21 +81,11 @@ const ParamIPAdapterImage = () => {
         }
       />
 
-      {ipAdapterInfo.adapterImage && (
-        <IAIIconButton
-          tooltip={t('controlnet.resetIPAdapterImage')}
-          aria-label={t('controlnet.resetIPAdapterImage')}
-          icon={<FaUndo />}
-          onClick={() => dispatch(ipAdapterImageChanged(null))}
-          isDisabled={!imageDTO}
-          size="sm"
-          sx={{
-            position: 'absolute',
-            top: 3,
-            right: 3,
-          }}
-        />
-      )}
+      <IAIDndImageIcon
+        onClick={() => dispatch(ipAdapterImageChanged(null))}
+        icon={ipAdapterInfo.adapterImage ? <FaUndo /> : undefined}
+        tooltip={t('controlnet.resetIPAdapterImage')}
+      />
     </Flex>
   );
 };