feat(ui): add maxImageUploadCount config setting

invokeai/frontend/web/src/app/components/App.tsx

@@ -32,7 +32,6 @@ import { selectLanguage } from 'features/system/store/systemSelectors';
 import { AppContent } from 'features/ui/components/AppContent';
 import { DeleteWorkflowDialog } from 'features/workflowLibrary/components/DeleteLibraryWorkflowConfirmationAlertDialog';
 import { NewWorkflowConfirmationAlertDialog } from 'features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog';
-import { AnimatePresence } from 'framer-motion';
 import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { memo, useCallback, useEffect } from 'react';
@@ -101,11 +100,9 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
       >
         <input {...dropzone.getInputProps()} />
         <AppContent />
-        <AnimatePresence>
-          {dropzone.isDragActive && isHandlingUpload && (
-            <ImageUploadOverlay dropzone={dropzone} setIsHandlingUpload={setIsHandlingUpload} />
-          )}
-        </AnimatePresence>
+        {dropzone.isDragActive && isHandlingUpload && (
+          <ImageUploadOverlay dropzone={dropzone} setIsHandlingUpload={setIsHandlingUpload} />
+        )}
       </Box>
       <DeleteImageModal />
       <ChangeBoardModal />

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -79,6 +79,7 @@ export type AppConfig = {
   metadataFetchDebounce?: number;
   workflowFetchDebounce?: number;
   isLocal?: boolean;
+  maxImageUploadCount?: number;
   sd: {
     defaultModel?: string;
     disabledControlNetModels: string[];

invokeai/frontend/web/src/common/components/ImageUploadOverlay.tsx

@@ -1,22 +1,12 @@
 import { Box, Flex, Heading } from '@invoke-ai/ui-library';
-import type { AnimationProps } from 'framer-motion';
-import { motion } from 'framer-motion';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
+import { selectMaxImageUploadCount } from 'features/system/store/configSlice';
 import { memo } from 'react';
 import type { DropzoneState } from 'react-dropzone';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-
-const initial: AnimationProps['initial'] = {
-  opacity: 0,
-};
-const animate: AnimationProps['animate'] = {
-  opacity: 1,
-  transition: { duration: 0.1 },
-};
-const exit: AnimationProps['exit'] = {
-  opacity: 0,
-  transition: { duration: 0.1 },
-};
+import { useBoardName } from 'services/api/hooks/useBoardName';
 
 type ImageUploadOverlayProps = {
   dropzone: DropzoneState;
@@ -24,7 +14,6 @@ type ImageUploadOverlayProps = {
 };
 
 const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
-  const { t } = useTranslation();
   const { dropzone, setIsHandlingUpload } = props;
 
   useHotkeys(
@@ -36,67 +25,65 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
   );
 
   return (
-    <Box
-      key="image-upload-overlay"
-      initial={initial}
-      animate={animate}
-      exit={exit}
-      as={motion.div}
-      position="absolute"
-      top={0}
-      insetInlineStart={0}
-      width="100dvw"
-      height="100dvh"
-      zIndex={999}
-      backdropFilter="blur(20px)"
-    >
+    <Box position="absolute" top={0} right={0} bottom={0} left={0} zIndex={999} backdropFilter="blur(20px)">
+      <Flex position="absolute" top={0} right={0} bottom={0} left={0} bg="base.900" opacity={0.7} />
       <Flex
         position="absolute"
-        top={0}
-        insetInlineStart={0}
-        w="full"
-        h="full"
-        bg="base.900"
-        opacity={0.7}
-        alignItems="center"
-        justifyContent="center"
+        flexDir="column"
+        gap={4}
+        top={2}
+        right={2}
+        bottom={2}
+        left={2}
+        opacity={1}
+        borderWidth={2}
+        borderColor={dropzone.isDragAccept ? 'invokeYellow.300' : 'error.500'}
+        borderRadius="base"
+        borderStyle="dashed"
         transitionProperty="common"
         transitionDuration="0.1s"
-      />
-      <Flex
-        position="absolute"
-        top={0}
-        insetInlineStart={0}
-        width="full"
-        height="full"
         alignItems="center"
         justifyContent="center"
-        p={4}
+        color={dropzone.isDragReject ? 'error.300' : undefined}
       >
-        <Flex
-          width="full"
-          height="full"
-          alignItems="center"
-          justifyContent="center"
-          flexDir="column"
-          gap={4}
-          borderWidth={3}
-          borderRadius="xl"
-          borderStyle="dashed"
-          color="base.100"
-          borderColor="base.200"
-        >
-          {dropzone.isDragAccept ? (
-            <Heading size="lg">{t('gallery.dropToUpload')}</Heading>
-          ) : (
-            <>
-              <Heading size="lg">{t('toast.invalidUpload')}</Heading>
-              <Heading size="md">{t('toast.uploadFailedInvalidUploadDesc')}</Heading>
-            </>
-          )}
-        </Flex>
+        {dropzone.isDragAccept && <DragAcceptMessage />}
+        {!dropzone.isDragAccept && <DragRejectMessage />}
       </Flex>
     </Box>
   );
 };
 export default memo(ImageUploadOverlay);
+
+const DragAcceptMessage = () => {
+  const { t } = useTranslation();
+  const selectedBoardId = useAppSelector(selectSelectedBoardId);
+  const boardName = useBoardName(selectedBoardId);
+
+  return (
+    <>
+      <Heading size="lg">{t('gallery.dropToUpload')}</Heading>
+      <Heading size="md">{t('toast.imagesWillBeAddedTo', { boardName })}</Heading>
+    </>
+  );
+};
+
+const DragRejectMessage = () => {
+  const { t } = useTranslation();
+  const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
+
+  if (maxImageUploadCount === undefined) {
+    return (
+      <>
+        <Heading size="lg">{t('toast.invalidUpload')}</Heading>
+        <Heading size="md">{t('toast.uploadFailedInvalidUploadDesc')}</Heading>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Heading size="lg">{t('toast.invalidUpload')}</Heading>
+      <Heading size="md">{t('toast.uploadFailedInvalidUploadDesc_withCount', { count: maxImageUploadCount })}</Heading>
+    </>
+  );
+};

invokeai/frontend/web/src/common/hooks/useFullscreenDropzone.ts

@@ -2,6 +2,7 @@ import { logger } from 'app/logging/logger';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
+import { selectMaxImageUploadCount } from 'features/system/store/configSlice';
 import { toast } from 'features/toast/toast';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect, useState } from 'react';
@@ -25,6 +26,7 @@ export const useFullscreenDropzone = () => {
   const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
   const [uploadImage] = useUploadImageMutation();
   const activeTabName = useAppSelector(selectActiveTab);
+  const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
 
   const getPostUploadAction = useCallback(
     (isSingleImage: boolean, isLastImage: boolean): PostUploadAction => {
@@ -49,12 +51,19 @@ export const useFullscreenDropzone = () => {
           file: rejection.file.path,
         }));
         log.error({ errors }, 'Invalid upload');
+        const description =
+          maxImageUploadCount === undefined
+            ? t('toast.uploadFailedInvalidUploadDesc')
+            : t('toast.uploadFailedInvalidUploadDesc_withCount', { count: maxImageUploadCount });
+
         toast({
           id: 'UPLOAD_FAILED',
           title: t('toast.uploadFailed'),
-          description: t('toast.uploadFailedInvalidUploadDesc'),
+          description,
           status: 'error',
         });
+
+        setIsHandlingUpload(false);
         return;
       }
 
@@ -73,20 +82,29 @@ export const useFullscreenDropzone = () => {
           isFirstUploadOfBatch: i === 0,
         });
       }
+
+      setIsHandlingUpload(false);
     },
-    [t, uploadImage, getPostUploadAction, autoAddBoardId]
+    [t, maxImageUploadCount, uploadImage, getPostUploadAction, autoAddBoardId]
   );
 
   const onDragOver = useCallback(() => {
     setIsHandlingUpload(true);
   }, []);
 
+  const onDragLeave = useCallback(() => {
+    setIsHandlingUpload(false);
+  }, []);
+
   const dropzone = useDropzone({
     accept,
     noClick: true,
     onDrop,
     onDragOver,
+    onDragLeave,
     noKeyboard: true,
+    multiple: maxImageUploadCount === undefined || maxImageUploadCount > 1,
+    maxFiles: maxImageUploadCount,
   });
 
   useEffect(() => {

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

@@ -1,5 +1,6 @@
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
+import { selectMaxImageUploadCount } from 'features/system/store/configSlice';
 import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
@@ -37,6 +38,7 @@ export const useImageUploadButton = ({
 }: UseImageUploadButtonArgs) => {
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
   const [uploadImage] = useUploadImageMutation();
+  const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
 
   const onDropAccepted = useCallback(
     (files: File[]) => {
@@ -62,7 +64,8 @@ export const useImageUploadButton = ({
     onDropAccepted,
     disabled: isDisabled,
     noDrag: true,
-    multiple: allowMultiple,
+    multiple: allowMultiple && (maxImageUploadCount === undefined || maxImageUploadCount > 1),
+    maxFiles: maxImageUploadCount,
   });
 
   return { getUploadButtonProps, getUploadInputProps, openUploader };

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -218,5 +218,6 @@ export const selectWorkflowFetchDebounce = createConfigSelector((config) => conf
 export const selectMetadataFetchDebounce = createConfigSelector((config) => config.metadataFetchDebounce ?? 300);
 
 export const selectIsModelsTabDisabled = createConfigSelector((config) => config.disabledTabs.includes('models'));
+export const selectMaxImageUploadCount = createConfigSelector((config) => config.maxImageUploadCount);
 
 export const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);