fix(ui): image field collection dnd adds instead of replaces

Author: psychedelicious

invokeai/frontend/web/src/features/dnd/dnd.ts

@@ -262,7 +262,7 @@ export const addImagesToNodeImageFieldCollectionDndTarget: DndTarget<
     }
     return false;
   },
-  handler: ({ sourceData, targetData, dispatch }) => {
+  handler: ({ sourceData, targetData, dispatch, getState }) => {
     if (!singleImageDndSource.typeGuard(sourceData) && !multipleImageDndSource.typeGuard(sourceData)) {
       return;
     }
@@ -276,7 +276,7 @@ export const addImagesToNodeImageFieldCollectionDndTarget: DndTarget<
       imageDTOs.push(...sourceData.payload.imageDTOs);
     }
 
-    addImagesToNodeImageFieldCollectionAction({ fieldIdentifer, imageDTOs, dispatch });
+    addImagesToNodeImageFieldCollectionAction({ fieldIdentifer, imageDTOs, dispatch, getState });
   },
 };
 //#endregion

invokeai/frontend/web/src/features/imageActions/actions.ts

@@ -1,3 +1,4 @@
+import { logger } from 'app/logging/logger';
 import type { AppDispatch, RootState } from 'app/store/store';
 import { deepClone } from 'common/util/deepClone';
 import { selectDefaultIPAdapter } from 'features/controlLayers/hooks/addLayerHooks';
@@ -30,14 +31,18 @@ import { calculateNewSize } from 'features/controlLayers/util/getScaledBoundingB
 import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
 import type { BoardId } from 'features/gallery/store/types';
 import { fieldImageCollectionValueChanged, fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import type { FieldIdentifier } from 'features/nodes/types/field';
+import { selectFieldInputInstance, selectNodesSlice } from 'features/nodes/store/selectors';
+import { type FieldIdentifier, isImageFieldCollectionInputInstance } from 'features/nodes/types/field';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { getOptimalDimension } from 'features/parameters/util/optimalDimension';
+import { uniqBy } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
+const log = logger('system');
+
 export const setGlobalReferenceImage = (arg: {
   imageDTO: ImageDTO;
   entityIdentifier: CanvasEntityIdentifier<'reference_image'>;
@@ -75,9 +80,24 @@ export const addImagesToNodeImageFieldCollectionAction = (arg: {
   imageDTOs: ImageDTO[];
   fieldIdentifer: FieldIdentifier;
   dispatch: AppDispatch;
+  getState: () => RootState;
 }) => {
-  const { imageDTOs, fieldIdentifer, dispatch } = arg;
-  dispatch(fieldImageCollectionValueChanged({ ...fieldIdentifer, value: imageDTOs }));
+  const { imageDTOs, fieldIdentifer, dispatch, getState } = arg;
+  const fieldInputInstance = selectFieldInputInstance(
+    selectNodesSlice(getState()),
+    fieldIdentifer.nodeId,
+    fieldIdentifer.fieldName
+  );
+
+  if (!isImageFieldCollectionInputInstance(fieldInputInstance)) {
+    log.warn({ fieldIdentifer }, 'Attempted to add images to a non-image field collection');
+    return;
+  }
+
+  const images = fieldInputInstance.value ? [...fieldInputInstance.value] : [];
+  images.push(...imageDTOs.map(({ image_name }) => ({ image_name })));
+  const uniqueImages = uniqBy(images, 'image_name');
+  dispatch(fieldImageCollectionValueChanged({ ...fieldIdentifer, value: uniqueImages }));
 };
 
 export const setComparisonImage = (arg: { imageDTO: ImageDTO; dispatch: AppDispatch }) => {