Refine upload status behavior

src/admin/upload/AdminUploadPanel.tsx

@@ -20,13 +20,16 @@ export default function AdminUploadPanel({
     uploadState: {
       isUploading,
       hideUploadPanel,
+      uploadError,
     },
     resetUploadState,
   } = useAppState();
 
   return (
     <AppGrid
-      className={clsx((!isUploading || hideUploadPanel) && 'hidden')}
+      className={clsx(
+        ((!isUploading || uploadError) || hideUploadPanel) && 'hidden',
+      )}
       contentMain={
         <Container
           color="gray"

src/photo/PhotoUploadWithStatus.tsx

@@ -74,7 +74,9 @@ export default function PhotoUploadWithStatus({
   }, [resetUploadState]);
   const isFinishing = isPending && shouldResetUploadStateAfterPending.current;
 
-  const uploadNumberText = `${fileUploadIndex + 1} of ${filesLength}`;
+  const uploadStatusText = filesLength > 1
+    ? `${fileUploadIndex + 1} of ${filesLength}`
+    : undefined;
 
   return (
     <div className={clsx(
@@ -127,6 +129,7 @@ export default function PhotoUploadWithStatus({
                   }
                 })
                 .catch(error => {
+                  console.error(error);
                   setUploadState?.({
                     isUploading: false,
                     uploadError: `Upload Error: ${error.message}`,
@@ -155,17 +158,25 @@ export default function PhotoUploadWithStatus({
                 Finishing ...
               </>
               : <>
-                {!showButton && <>
+                {!showButton && uploadStatusText
-                  <ResponsiveText shortText={uploadNumberText}>
+                  ? <>
-                    Uploading {uploadNumberText}
+                    <ResponsiveText shortText={uploadStatusText}>
-                  </ResponsiveText>
+                      Uploading {uploadStatusText}
-                  {': '}
+                    </ResponsiveText>
-                </>}
+                    {': '}
-                {fileUploadName}
+                    {fileUploadName}
+                  </>
+                  : <ResponsiveText shortText={fileUploadName}>
+                    Uploading {fileUploadName}
+                  </ResponsiveText>}
               </>
             : !showButton && <>Initializing</>}
         </span>
       </div>}
+      {uploadError &&
+        <div className="text-error">
+          {uploadError}
+        </div>}
       {debug && debugDownload &&
         <a
           className="block"
@@ -174,10 +185,6 @@ export default function PhotoUploadWithStatus({
         >
           Download
         </a>}
-      {uploadError &&
-        <div className="text-error">
-          {uploadError}
-        </div>}
     </div>
   );
 };