wip

invokeai/frontend/web/public/locales/en.json

@@ -1152,8 +1152,8 @@
         "reloadingIn": "Reloading in"
     },
     "toast": {
-        "addedToBoard": "Added to board {{name}}'s assets",
+        "addedToBoard": "Added to board {{name}}",
-        "addedToUncategorized": "Added to board $t(boards.uncategorized)'s assets",
+        "addedToUncategorized": "Added to board $t(boards.uncategorized)",
         "baseModelChanged": "Base Model Changed",
         "baseModelChangedCleared_one": "Cleared or disabled {{count}} incompatible submodel",
         "baseModelChangedCleared_other": "Cleared or disabled {{count}} incompatible submodels",

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts

@@ -41,6 +41,11 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
 
       log.debug({ imageDTO }, 'Image uploaded');
 
+      if (imageDTO.is_intermediate) {
+        // No further action needed for intermediate images
+        return;
+      }
+
       const boardId = imageDTO.board_id ?? 'none';
 
       if (action.meta.arg.originalArgs.withToast) {
@@ -65,21 +70,23 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         }, 3000);
       }
 
-      /**
+      if (action.meta.arg.originalArgs.switchToBoard) {
-       * We only want to change the board and view if this is the first upload of a batch, else we end up hijacking
+        /**
-       * the user's gallery board and view selection:
+         * We only want to change the board and view if this is the first upload of a batch, else we end up hijacking
-       * - User uploads multiple images
+         * the user's gallery board and view selection:
-       * - A couple uploads finish, but others are pending still
+         * - User uploads multiple images
-       * - User changes the board selection
+         * - A couple uploads finish, but others are pending still
-       * - Pending uploads finish and change the board back to the original board
+         * - User changes the board selection
-       * - User is confused as to why the board changed
+         * - Pending uploads finish and change the board back to the original board
-       *
+         * - User is confused as to why the board changed
-       * Default to true to not require _all_ image upload handlers to set this value
+         *
-       */
+         * Default to true to not require _all_ image upload handlers to set this value
-      const isFirstUploadOfBatch = action.meta.arg.originalArgs.isFirstUploadOfBatch ?? true;
+         */
-      if (isFirstUploadOfBatch) {
+        const isFirstUploadOfBatch = action.meta.arg.originalArgs.isFirstUploadOfBatch ?? true;
-        dispatch(boardIdSelected({ boardId }));
+        if (isFirstUploadOfBatch) {
-        dispatch(galleryViewChanged('assets'));
+          dispatch(galleryViewChanged('assets'));
+          dispatch(boardIdSelected({ boardId, selectedImageName: imageDTO.image_name }));
+        }
       }
     },
   });

invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts

@@ -303,6 +303,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
         board_id: uploadOptions.is_intermediate ? undefined : selectAutoAddBoardId(this.manager.store.getState()),
         metadata: uploadOptions.metadata,
         withToast: false,
+        switchToBoard: false,
       })
     );
     this.$isUploading.set(false);

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts

@@ -494,6 +494,7 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
       image_category: 'other',
       is_intermediate: true,
       withToast: false,
+      switchToBoard: false,
     });
     const imageObject = imageDTOToImageObject(imageDTO);
     if (replaceObjects) {

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -111,9 +111,13 @@ export const gallerySlice = createSlice({
     autoAssignBoardOnClickChanged: (state, action: PayloadAction<boolean>) => {
       state.autoAssignBoardOnClick = action.payload;
     },
-    boardIdSelected: (state, action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }>) => {
+    boardIdSelected: (
-      state.selectedBoardId = action.payload.boardId;
+      state,
-      state.galleryView = 'images';
+      action: PayloadAction<{ boardId: BoardId; selectedImageName?: string; galleryView?: GalleryView }>
+    ) => {
+      const { boardId, selectedImageName, galleryView } = action.payload;
+      state.selectedBoardId = boardId;
+      state.galleryView = galleryView ?? 'images';
       state.offset = 0;
     },
     autoAddBoardIdChanged: (state, action: PayloadAction<BoardId>) => {

invokeai/frontend/web/src/services/api/endpoints/images.ts

@@ -272,6 +272,7 @@ export const imagesApi = api.injectEndpoints({
         metadata?: JsonObject;
         isFirstUploadOfBatch?: boolean;
         withToast?: boolean;
+        switchToBoard?: boolean;
       }
     >({
       query: ({ file, image_category, is_intermediate, session_id, board_id, crop_visible, metadata }) => {
@@ -631,71 +632,35 @@ export type UploadImageArg = {
   crop_visible?: boolean;
   metadata?: JsonObject;
   withToast?: boolean;
+  switchToBoard?: boolean;
+};
+const uploadArgDefaults: Partial<UploadImageArg> = {
+  crop_visible: false,
+  withToast: true,
+  switchToBoard: true,
 };
 
 export const uploadImage = (arg: UploadImageArg): Promise<ImageDTO> => {
-  const {
-    file,
-    image_category,
-    is_intermediate,
-    crop_visible = false,
-    board_id,
-    metadata,
-    session_id,
-    withToast = true,
-  } = arg;
-
   const { dispatch } = getStore();
-
+  const req = dispatch(imagesApi.endpoints.uploadImage.initiate({ ...uploadArgDefaults, ...arg }, { track: false }));
-  const req = dispatch(
+  const imageDTO = req.unwrap();
-    imagesApi.endpoints.uploadImage.initiate(
+  req.reset();
-      {
+  return imageDTO;
-        file,
-        image_category,
-        is_intermediate,
-        crop_visible,
-        board_id,
-        metadata,
-        session_id,
-        withToast,
-      },
-      { track: false }
-    )
-  );
-  return req.unwrap();
 };
 
 export const uploadImages = async (args: UploadImageArg[]): Promise<ImageDTO[]> => {
   const { dispatch } = getStore();
   const results = await Promise.allSettled(
     args.map((arg, i) => {
-      const {
-        file,
-        image_category,
-        is_intermediate,
-        crop_visible = false,
-        board_id,
-        metadata,
-        session_id,
-        withToast = true,
-      } = arg;
       const req = dispatch(
         imagesApi.endpoints.uploadImage.initiate(
-          {
+          { ...uploadArgDefaults, ...arg, isFirstUploadOfBatch: i === 0 },
-            file,
-            image_category,
-            is_intermediate,
-            crop_visible,
-            board_id,
-            metadata,
-            session_id,
-            isFirstUploadOfBatch: i === 0,
-            withToast,
-          },
           { track: false }
         )
       );
-      return req.unwrap();
+      const imageDTO = req.unwrap();
+      req.reset();
+      return imageDTO;
     })
   );
   return results.filter((r): r is PromiseFulfilledResult<ImageDTO> => r.status === 'fulfilled').map((r) => r.value);