diff --git a/src/admin/AdminPhotoMenu.tsx b/src/admin/AdminPhotoMenu.tsx index d44d1af3..cfee9dda 100644 --- a/src/admin/AdminPhotoMenu.tsx +++ b/src/admin/AdminPhotoMenu.tsx @@ -156,7 +156,13 @@ export default function AdminPhotoMenu({ />, action: () => new Promise(resolve => { onUploadFinishRef.current = resolve; - inputRef.current?.click(); + if (inputRef.current) { + inputRef.current.value = ''; + inputRef.current.click(); + inputRef.current.oncancel = () => resolve(false); + } else { + resolve(); + } }), }); @@ -220,6 +226,7 @@ export default function AdminPhotoMenu({ }}/> uploadPhotoFromClient(blob, extension) .then(updatedStorageUrl => diff --git a/src/app/AppStateProvider.tsx b/src/app/AppStateProvider.tsx index a4bb85bd..ab46250e 100644 --- a/src/app/AppStateProvider.tsx +++ b/src/app/AppStateProvider.tsx @@ -202,16 +202,17 @@ export default function AppStateProvider({ }, [router, pathname]); // Returns false when upload is cancelled - const startUpload = useCallback(() => new Promise(resolve => { - if (uploadInputRef.current) { - uploadInputRef.current.value = ''; - uploadInputRef.current.click(); - uploadInputRef.current.oninput = () => resolve(true); - uploadInputRef.current.oncancel = () => resolve(false); - } else { - resolve(false); - } - }) + const startUpload = useCallback(() => + new Promise(resolve => { + if (uploadInputRef.current) { + uploadInputRef.current.value = ''; + uploadInputRef.current.click(); + uploadInputRef.current.oninput = () => resolve(true); + uploadInputRef.current.oncancel = () => resolve(false); + } else { + resolve(false); + } + }) , []); const setUploadState = useCallback((uploadState: Partial) => { _setUploadState(prev => ({ ...prev, ...uploadState })); diff --git a/src/components/ImageInput.tsx b/src/components/ImageInput.tsx index 95469822..ddacbadd 100644 --- a/src/components/ImageInput.tsx +++ b/src/components/ImageInput.tsx @@ -15,6 +15,7 @@ export default function ImageInput({ id = 'file', onStart, onBlobReady, + multiple = true, shouldResize, maxSize = MAX_IMAGE_SIZE, quality = 0.9, @@ -31,6 +32,7 @@ export default function ImageInput({ hasMultipleUploads?: boolean, isLastBlob?: boolean, }) => Promise + multiple?: boolean shouldResize?: boolean maxSize?: number quality?: number @@ -102,7 +104,7 @@ export default function ImageInput({ className="hidden!" accept={ACCEPTED_PHOTO_FILE_TYPES.join(',')} disabled={disabled} - multiple + multiple={multiple} onChange={async e => { onStart?.(); const { files } = e.currentTarget;