Fixes edge case: upload over gets stuck while alt tabbing

- Press esc to close it now

frontend/src/common/components/ImageUploadOverlay.tsx

@@ -0,0 +1,39 @@
+import { Heading } from '@chakra-ui/react';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+type ImageUploadOverlayProps = {
+  isDragAccept: boolean;
+  isDragReject: boolean;
+  overlaySecondaryText: string;
+  setIsHandlingUpload: (isHandlingUpload: boolean) => void;
+};
+
+const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
+  const {
+    isDragAccept,
+    isDragReject,
+    overlaySecondaryText,
+    setIsHandlingUpload,
+  } = props;
+
+  useHotkeys('esc', () => {
+    setIsHandlingUpload(false);
+  });
+
+  return (
+    <div className="dropzone-container">
+      {isDragAccept && (
+        <div className="dropzone-overlay is-drag-accept">
+          <Heading size={'lg'}>Upload Image{overlaySecondaryText}</Heading>
+        </div>
+      )}
+      {isDragReject && (
+        <div className="dropzone-overlay is-drag-reject">
+          <Heading size={'lg'}>Invalid Upload</Heading>
+          <Heading size={'md'}>Must be single JPEG or PNG image</Heading>
+        </div>
+      )}
+    </div>
+  );
+};
+export default ImageUploadOverlay;

frontend/src/common/components/ImageUploader.tsx

@@ -1,12 +1,13 @@
 import { useCallback, ReactNode, useState, useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../../app/store';
 import { FileRejection, useDropzone } from 'react-dropzone';
-import { Heading, Spinner, useToast } from '@chakra-ui/react';
+import { useToast } from '@chakra-ui/react';
 import { uploadImage } from '../../app/socketio/actions';
 import { ImageUploadDestination, UploadImagePayload } from '../../app/invokeai';
 import { ImageUploaderTriggerContext } from '../../app/contexts/ImageUploaderTriggerContext';
 import { activeTabNameSelector } from '../../features/options/optionsSelectors';
 import { tabDict } from '../../features/tabs/InvokeTabs';
+import ImageUploadOverlay from './ImageUploadOverlay';
 
 type ImageUploaderProps = {
   children: ReactNode;
@@ -72,6 +73,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
     accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg', '.png'] },
     noClick: true,
     onDrop,
+    onDragOver: () => setIsHandlingUpload(true),
     maxFiles: 1,
   });
 
@@ -129,9 +131,7 @@ const ImageUploader = (props: ImageUploaderProps) => {
     };
   }, [dispatch, toast, activeTabName]);
 
-  const overlaySecondaryText = ['img2img', 'inpainting'].includes(
-    activeTabName
-  )
+  const overlaySecondaryText = ['img2img', 'inpainting'].includes(activeTabName)
     ? ` to ${tabDict[activeTabName as keyof typeof tabDict].tooltip}`
     : ``;
 
@@ -140,25 +140,13 @@ const ImageUploader = (props: ImageUploaderProps) => {
       <div {...getRootProps({ style: {} })}>
         <input {...getInputProps()} />
         {children}
-        {isDragActive && (
-          <div className="dropzone-container">
-            {isDragAccept && (
-              <div className="dropzone-overlay is-drag-accept">
-                <Heading size={'lg'}>Upload Image{overlaySecondaryText}</Heading>
-              </div>
-            )}
-            {isDragReject && (
-              <div className="dropzone-overlay is-drag-reject">
-                <Heading size={'lg'}>Invalid Upload</Heading>
-                <Heading size={'md'}>Must be single JPEG or PNG image</Heading>
-              </div>
-            )}
-            {isHandlingUpload && (
-              <div className="dropzone-overlay is-handling-upload">
-                <Spinner />
-              </div>
-            )}
-          </div>
+        {isDragActive && isHandlingUpload && (
+          <ImageUploadOverlay
+            isDragAccept={isDragAccept}
+            isDragReject={isDragReject}
+            overlaySecondaryText={overlaySecondaryText}
+            setIsHandlingUpload={setIsHandlingUpload}
+          />
         )}
       </div>
     </ImageUploaderTriggerContext.Provider>