feat(ui): allow multiple images to be uploaded via gallery button, remove double add-to-board logic for uploaded images

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

@@ -12,7 +12,8 @@
         "resetUI": "$t(accessibility.reset) UI",
         "toggleRightPanel": "Toggle Right Panel (G)",
         "toggleLeftPanel": "Toggle Left Panel (T)",
-        "uploadImage": "Upload Image"
+        "uploadImage": "Upload Image",
+        "uploadImages": "Upload Image(s)"
     },
     "boards": {
         "addBoard": "Add Board",

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

@@ -51,22 +51,17 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
       if (postUploadAction?.type === 'TOAST') {
         if (!autoAddBoardId || autoAddBoardId === 'none') {
           const title = postUploadAction.title || DEFAULT_UPLOADED_TOAST.title;
-          toast({ ...DEFAULT_UPLOADED_TOAST, title });
+          const duration = postUploadAction.duration !== undefined ? postUploadAction.duration : undefined;
+          toast({ ...DEFAULT_UPLOADED_TOAST, title, duration });
           dispatch(boardIdSelected({ boardId: 'none' }));
           dispatch(galleryViewChanged('assets'));
         } else {
-          // Add this image to the board
-          dispatch(
-            imagesApi.endpoints.addImageToBoard.initiate({
-              board_id: autoAddBoardId,
-              imageDTO,
-            })
-          );
-
           // Attempt to get the board's name for the toast
           const queryArgs = selectListBoardsQueryArgs(state);
           const { data } = boardsApi.endpoints.listAllBoards.select(queryArgs)(state);
 
+          const title = postUploadAction.title || DEFAULT_UPLOADED_TOAST.title;
+          const duration = postUploadAction.duration !== undefined ? postUploadAction.duration : undefined;
           // Fall back to just the board id if we can't find the board for some reason
           const board = data?.find((b) => b.board_id === autoAddBoardId);
           const description = board
@@ -76,6 +71,8 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
           toast({
             ...DEFAULT_UPLOADED_TOAST,
             description,
+            title,
+            duration,
           });
           dispatch(boardIdSelected({ boardId: autoAddBoardId }));
           dispatch(galleryViewChanged('assets'));

invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx

@@ -8,6 +8,7 @@ import type { PostUploadAction } from 'services/api/types';
 type UseImageUploadButtonArgs = {
   postUploadAction?: PostUploadAction;
   isDisabled?: boolean;
+  allowMultiple?: boolean;
 };
 
 /**
@@ -29,26 +30,43 @@ type UseImageUploadButtonArgs = {
  * <Button {...getUploadButtonProps()} /> // will open the file dialog on click
  * <input {...getUploadInputProps()} /> // hidden, handles native upload functionality
  */
-export const useImageUploadButton = ({ postUploadAction, isDisabled }: UseImageUploadButtonArgs) => {
+export const useImageUploadButton = ({
+  postUploadAction,
+  isDisabled,
+  allowMultiple = false,
+}: UseImageUploadButtonArgs) => {
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
   const [uploadImage] = useUploadImageMutation();
+
   const onDropAccepted = useCallback(
     (files: File[]) => {
-      const file = files[0];
+      if (allowMultiple) {
+        for (const file of files) {
+          uploadImage({
+            file,
+            image_category: 'user',
+            is_intermediate: false,
+            postUploadAction: postUploadAction ?? { type: 'TOAST' },
+            board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+          });
+        }
+      } else {
+        const file = files[0];
 
-      if (!file) {
-        return;
+        if (!file) {
+          return;
+        }
+
+        uploadImage({
+          file,
+          image_category: 'user',
+          is_intermediate: false,
+          postUploadAction: postUploadAction ?? { type: 'TOAST' },
+          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+        });
       }
-
-      uploadImage({
-        file,
-        image_category: 'user',
-        is_intermediate: false,
-        postUploadAction: postUploadAction ?? { type: 'TOAST' },
-        board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-      });
     },
-    [autoAddBoardId, postUploadAction, uploadImage]
+    [autoAddBoardId, postUploadAction, uploadImage, allowMultiple]
   );
 
   const {
@@ -60,7 +78,7 @@ export const useImageUploadButton = ({ postUploadAction, isDisabled }: UseImageU
     onDropAccepted,
     disabled: isDisabled,
     noDrag: true,
-    multiple: false,
+    multiple: allowMultiple,
   });
 
   return { getUploadButtonProps, getUploadInputProps, openUploader };

invokeai/frontend/web/src/features/gallery/components/GalleryUploadButton.tsx

@@ -4,15 +4,15 @@ import { t } from 'i18next';
 import { PiUploadBold } from 'react-icons/pi';
 
 export const GalleryUploadButton = () => {
-  const uploadApi = useImageUploadButton({ postUploadAction: { type: 'TOAST' } });
+  const uploadApi = useImageUploadButton({ postUploadAction: { type: 'TOAST', duration: null }, allowMultiple: true });
   return (
     <>
       <IconButton
         size="sm"
         alignSelf="stretch"
         variant="link"
-        aria-label={t('accessibility.uploadImage')}
-        tooltip={t('accessibility.uploadImage')}
+        aria-label={t('accessibility.uploadImages')}
+        tooltip={t('accessibility.uploadImages')}
         icon={<PiUploadBold />}
         {...uploadApi.getUploadButtonProps()}
       />

invokeai/frontend/web/src/services/api/types.ts

@@ -222,6 +222,7 @@ type UpscaleInitialImageAction = {
 type ToastAction = {
   type: 'TOAST';
   title?: string;
+  duration?: number | null;
 };
 
 type AddToBatchAction = {