feat(ui): restore missing upload buttons

Author: psychedelicious

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

@@ -1,4 +1,5 @@
-import { Flex, Icon, type SystemStyleObject } from '@invoke-ai/ui-library';
+import type { IconButtonProps, SystemStyleObject } from '@invoke-ai/ui-library';
+import { IconButton } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import { useAppSelector } from 'app/store/storeHooks';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
@@ -8,10 +9,11 @@ import { useCallback } from 'react';
 import type { FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
-import { PiUploadSimpleBold } from 'react-icons/pi';
+import { PiUploadBold } from 'react-icons/pi';
 import { uploadImages, useUploadImageMutation } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import { assert } from 'tsafe';
+import type { SetOptional } from 'type-fest';
 
 type UseImageUploadButtonArgs =
   | {
@@ -48,7 +50,7 @@ const log = logger('gallery');
  */
 export const useImageUploadButton = ({ onUpload, isDisabled, allowMultiple }: UseImageUploadButtonArgs) => {
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const [uploadImage] = useUploadImageMutation();
+  const [uploadImage, request] = useUploadImageMutation();
   const maxImageUploadCount = useAppSelector(selectMaxImageUploadCount);
   const { t } = useTranslation();
 
@@ -128,36 +130,42 @@ export const useImageUploadButton = ({ onUpload, isDisabled, allowMultiple }: Us
     maxFiles: maxImageUploadCount,
   });
 
-  return { getUploadButtonProps, getUploadInputProps, openUploader };
+  return { getUploadButtonProps, getUploadInputProps, openUploader, request };
 };
 
 const sx = {
-  w: 'full',
-  h: 'full',
-  alignItems: 'center',
-  justifyContent: 'center',
+  borderColor: 'error.500',
+  borderStyle: 'solid',
+  borderWidth: 0,
   borderRadius: 'base',
-  transitionProperty: 'common',
-  transitionDuration: '0.1s',
-  '&[data-disabled=false]': {
-    color: 'base.500',
-  },
-  '&[data-disabled=true]': {
-    cursor: 'pointer',
-    bg: 'base.700',
-    _hover: {
-      bg: 'base.650',
-      color: 'base.300',
-    },
+  '&[data-error=true]': {
+    borderWidth: 1,
   },
 } satisfies SystemStyleObject;
 
-export const UploadImageButton = (props: UseImageUploadButtonArgs) => {
-  const uploadApi = useImageUploadButton(props);
+export const UploadImageButton = ({
+  isDisabled = false,
+  onUpload,
+  isError = false,
+  ...rest
+}: {
+  onUpload?: (imageDTO: ImageDTO) => void;
+  isError?: boolean;
+} & SetOptional<IconButtonProps, 'aria-label'>) => {
+  const uploadApi = useImageUploadButton({ isDisabled, allowMultiple: false, onUpload });
   return (
-    <Flex sx={sx} {...uploadApi.getUploadButtonProps()}>
-      <Icon as={PiUploadSimpleBold} boxSize={16} />
+    <>
+      <IconButton
+        aria-label="Upload image"
+        variant="ghost"
+        sx={sx}
+        data-error={isError}
+        icon={<PiUploadBold />}
+        isLoading={uploadApi.request.isLoading}
+        {...rest}
+        {...uploadApi.getUploadButtonProps()}
+      />
       <input {...uploadApi.getUploadInputProps()} />
-    </Flex>
+    </>
   );
 };

invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx

@@ -1,4 +1,3 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
@@ -15,20 +14,6 @@ import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import { $isConnected } from 'services/events/stores';
 
-const sx = {
-  position: 'relative',
-  w: 'full',
-  h: 'full',
-  alignItems: 'center',
-  borderColor: 'error.500',
-  borderStyle: 'solid',
-  borderWidth: 0,
-  borderRadius: 'base',
-  '&[data-error=true]': {
-    borderWidth: 1,
-  },
-} satisfies SystemStyleObject;
-
 type Props<T extends typeof setGlobalReferenceImageDndTarget | typeof setRegionalGuidanceReferenceImageDndTarget> = {
   image: ImageWithDims | null;
   onChangeImage: (imageDTO: ImageDTO | null) => void;
@@ -64,8 +49,16 @@ export const IPAdapterImagePreview = memo(
     );
 
     return (
-      <Flex sx={sx} data-error={!imageDTO && !image?.image_name}>
-        {!imageDTO && <UploadImageButton allowMultiple={false} onUpload={onUpload} />}
+      <Flex position="relative" w="full" h="full" alignItems="center" data-error={!imageDTO && !image?.image_name}>
+        {!imageDTO && (
+          <UploadImageButton
+            w="full"
+            h="full"
+            isError={!imageDTO && !image?.image_name}
+            onUpload={onUpload}
+            fontSize={36}
+          />
+        )}
         {imageDTO && (
           <>
             <DndImage imageDTO={imageDTO} />

invokeai/frontend/web/src/features/controlLayers/hooks/useSaveLayerToAssets.ts

@@ -6,10 +6,9 @@ import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers
 import { canvasToBlob } from 'features/controlLayers/konva/util';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { useCallback } from 'react';
-import { useUploadImageMutation } from 'services/api/endpoints/images';
+import { uploadImage } from 'services/api/endpoints/images';
 
 export const useSaveLayerToAssets = () => {
-  const [uploadImage] = useUploadImageMutation();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
 
   const saveLayerToAssets = useCallback(
@@ -34,7 +33,7 @@ export const useSaveLayerToAssets = () => {
         board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
       });
     },
-    [autoAddBoardId, uploadImage]
+    [autoAddBoardId]
   );
 
   return saveLayerToAssets;

invokeai/frontend/web/src/features/dnd/DndDropTarget.tsx

@@ -1,8 +1,5 @@
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { dropTargetForExternal, monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
-import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Box } from '@invoke-ai/ui-library';
 import { getStore } from 'app/store/nanostores/store';
@@ -11,17 +8,6 @@ import type { AnyDndTarget } from 'features/dnd/dnd';
 import { DndDropOverlay } from 'features/dnd/DndDropOverlay';
 import type { DndTargetState } from 'features/dnd/types';
 import { memo, useEffect, useRef, useState } from 'react';
-import { uploadImage } from 'services/api/endpoints/images';
-import { z } from 'zod';
-
-const ACCEPTED_IMAGE_TYPES = ['image/png', 'image/jpg', 'image/jpeg'];
-const ACCEPTED_FILE_EXTENSIONS = ['.png', '.jpg', '.jpeg'];
-const MAX_IMAGE_SIZE = 4; //In MegaBytes
-
-const sizeInMB = (sizeInBytes: number, decimalsNum = 2) => {
-  const result = sizeInBytes / (1024 * 1024);
-  return +result.toFixed(decimalsNum);
-};
 
 const sx = {
   position: 'absolute',
@@ -38,39 +24,16 @@ const sx = {
   },
 } satisfies SystemStyleObject;
 
-const zUploadFile = z
-  .custom<File>()
-  .refine(
-    (file) => {
-      return sizeInMB(file.size) <= MAX_IMAGE_SIZE;
-    },
-    () => ({ message: `The maximum image size is ${MAX_IMAGE_SIZE}MB` })
-  )
-  .refine(
-    (file) => {
-      return ACCEPTED_IMAGE_TYPES.includes(file.type);
-    },
-    (file) => ({ message: `File type ${file.type} is not supported` })
-  )
-  .refine(
-    (file) => {
-      return ACCEPTED_FILE_EXTENSIONS.some((ext) => file.name.endsWith(ext));
-    },
-    (file) => ({ message: `File extension .${file.name.split('.').at(-1)} is not supported` })
-  );
-
 type Props<T extends AnyDndTarget> = {
   dndTarget: T;
   dndTargetData: ReturnType<T['getData']>;
   label: string;
-  externalLabel?: string;
   isDisabled?: boolean;
 };
 
 export const DndDropTarget = memo(<T extends AnyDndTarget>(props: Props<T>) => {
-  const { dndTarget, dndTargetData, label, externalLabel = label, isDisabled } = props;
+  const { dndTarget, dndTargetData, label, isDisabled } = props;
   const [dndState, setDndState] = useState<DndTargetState>('idle');
-  const [dndOrigin, setDndOrigin] = useState<'element' | 'external' | null>(null);
   const ref = useRef<HTMLDivElement>(null);
   const dispatch = useAppDispatch();
 
@@ -112,86 +75,18 @@ export const DndDropTarget = memo(<T extends AnyDndTarget>(props: Props<T>) => {
           return dndTarget.isValid(arg);
         },
         onDragStart: () => {
-          setDndOrigin('element');
           setDndState('potential');
         },
         onDrop: () => {
-          setDndOrigin(null);
           setDndState('idle');
         },
       })
     );
   }, [dispatch, isDisabled, dndTarget, dndTargetData]);
 
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    if (isDisabled) {
-      return;
-    }
-
-    return combine(
-      dropTargetForExternal({
-        element,
-        canDrop: (args) => {
-          if (!containsFiles(args)) {
-            return false;
-          }
-          return true;
-        },
-        onDragEnter: () => {
-          setDndState('over');
-        },
-        onDragLeave: () => {
-          setDndState('potential');
-        },
-        onDrop: async ({ source }) => {
-          const files = await getFiles({ source });
-          for (const file of files) {
-            if (file === null) {
-              continue;
-            }
-            if (!zUploadFile.safeParse(file).success) {
-              continue;
-            }
-            const imageDTO = await uploadImage({
-              type: 'file',
-              file: file,
-              image_category: 'user',
-              is_intermediate: false,
-            });
-          }
-        },
-      }),
-      monitorForExternal({
-        canMonitor: (args) => {
-          if (!containsFiles(args)) {
-            return false;
-          }
-          return true;
-        },
-        onDragStart: () => {
-          setDndOrigin('external');
-          setDndState('potential');
-          preventUnhandled.start();
-        },
-        onDrop: () => {
-          setDndOrigin(null);
-          setDndState('idle');
-          preventUnhandled.stop();
-        },
-      })
-    );
-  }, [dispatch, isDisabled]);
-
   return (
     <Box ref={ref} sx={sx} data-dnd-state={dndState}>
-      <DndDropOverlay
-        dndState={dndState}
-        label={dndOrigin === 'element' ? label : dndOrigin === 'external' ? externalLabel : undefined}
-      />
+      <DndDropOverlay dndState={dndState} label={label} />
     </Box>
   );
 });

invokeai/frontend/web/src/features/dnd/DndImage.tsx

@@ -22,9 +22,10 @@ const sx = {
 
 type Props = ImageProps & {
   imageDTO: ImageDTO;
+  asThumbnail?: boolean;
 };
 
-export const DndImage = memo(({ imageDTO, ...rest }: Props) => {
+export const DndImage = memo(({ imageDTO, asThumbnail, ...rest }: Props) => {
   const store = useAppStore();
   const [isDragging, setIsDragging] = useState(false);
   const [element, ref] = useState<HTMLImageElement | null>(null);
@@ -62,8 +63,8 @@ export const DndImage = memo(({ imageDTO, ...rest }: Props) => {
       <Image
         role="button"
         ref={ref}
-        src={imageDTO.image_url}
-        fallbackSrc={imageDTO.thumbnail_url}
+        src={asThumbnail ? imageDTO.thumbnail_url : imageDTO.image_url}
+        fallbackSrc={asThumbnail ? undefined : imageDTO.thumbnail_url}
         w={imageDTO.width}
         sx={sx}
         data-is-dragging={isDragging}

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

@@ -1,8 +1,5 @@
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
-import { containsFiles } from '@atlaskit/pragmatic-drag-and-drop/external/file';
-import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
 import { logger } from 'app/logging/logger';
 import { getStore } from 'app/store/nanostores/store';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
@@ -63,20 +60,6 @@ export const useDndMonitor = () => {
 
           log.warn(parseify({ sourceData, targetData }), 'Invalid drop');
         },
-      }),
-      monitorForExternal({
-        canMonitor: (args) => {
-          if (!containsFiles(args)) {
-            return false;
-          }
-          return true;
-        },
-        onDragStart: () => {
-          preventUnhandled.start();
-        },
-        onDrop: () => {
-          preventUnhandled.stop();
-        },
       })
     );
   }, []);