Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixes edge case: upload over gets stuck while alt tabbing

Browse Source 
- Press esc to close it now
This commit is contained in:
psychedelicious 2022-11-02 21:02:01 +11:00 committed by Lincoln Stein
parent 5afff65b71
commit 0fda612f3f
2 changed files with 50 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/common/components/ImageUploadOverlay.tsx Normal file
View File

@ -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;

34
frontend/src/common/components/ImageUploader.tsx
View File

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