Refine reupload input behavior

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({
         }}/>
         <ImageInput
           ref={inputRef}
+          multiple={false}
           onBlobReady={async ({ blob, extension }) =>
             uploadPhotoFromClient(blob, extension)
               .then(updatedStorageUrl =>

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<boolean>(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<boolean>(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<UploadState>) => {
     _setUploadState(prev => ({ ...prev, ...uploadState }));

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<any>
+  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;