Improve photo upload state handling

src/components/ImageInput.tsx

@@ -11,13 +11,15 @@ import { ACCEPTED_PHOTO_FILE_TYPES } from '@/photo';
 const INPUT_ID = 'file';
 
 export default function ImageInput({
+  onStart,
   onBlobReady,
   maxSize,
   quality = 0.8,
   loading,
   debug,
 }: {
-  onBlobReady: (blob: Blob, extension?: string) => void
+  onStart?: () => void
+  onBlobReady?: (blob: Blob, extension?: string) => void
   maxSize?: number
   quality?: number
   loading?: boolean
@@ -62,6 +64,7 @@ export default function ImageInput({
             accept={ACCEPTED_PHOTO_FILE_TYPES.join(',')}
             disabled={loading}
             onChange={async e => {
+              onStart?.();
               const file = e.currentTarget.files?.[0];
               setFileName(file?.name);
               const extension = file?.name.split('.').pop()?.toLowerCase();
@@ -69,7 +72,7 @@ export default function ImageInput({
               if (file) {
                 if (!maxSize) {
                   // No need to resize
-                  onBlobReady(file);
+                  onBlobReady?.(file);
                 } else if (canvas) {
                   const image = await blobToImage(file);
                   setImage(image);
@@ -106,7 +109,7 @@ export default function ImageInput({
                         // await sleep();
                         const newBlob = await CopyExif(file, blob, imageType);
                         // await sleep();
-                        onBlobReady(newBlob, extension);
+                        onBlobReady?.(newBlob, extension);
                       }
                     },
                     imageType,

src/photo/PhotoUpload.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import { pathForAdminUploadUrl } from '@/site/paths';
 import ImageInput from '../components/ImageInput';
 import { MAX_IMAGE_SIZE } from '@/utility/image';
+import { cc } from '@/utility/css';
 
 export default function PhotoUpload({
   shouldResize,
@@ -24,21 +25,28 @@ export default function PhotoUpload({
   const router = useRouter();
 
   return (
-    <div className="space-y-4">
+    <div className={cc(
+      'space-y-4',
+      isUploading && 'cursor-not-allowed',
+    )}>
       <div className="flex items-center gap-8">
         <form className="flex items-center gap-3">
           <ImageInput
             maxSize={shouldResize ? MAX_IMAGE_SIZE : undefined}
             loading={isUploading}
+            onStart={() => {
+              setIsUploading(true);
+              setUploadError('');
+            }}
             onBlobReady={(blob, extension) => {
               if (debug) {
                 setDebugDownload({
                   href: URL.createObjectURL(blob),
                   fileName: `debug.${extension}`,
                 });
-              } else {
-                setIsUploading(true);
+                setIsUploading(false);
                 setUploadError('');
+              } else {
                 uploadPhotoFromClient(
                   blob,
                   extension,