retry on 429

src/components/HomeUpload/HomeUpload.js

@@ -105,7 +105,7 @@ export default function HomeUpload() {
       });
     };
 
-    acceptedFiles.forEach(async (file) => {
+    acceptedFiles.forEach((file) => {
       const onUploadProgress = ({ loaded, total }) => {
         const progress = loaded / total;
         const status = progress === 1 ? "processing" : "uploading";
@@ -120,21 +120,31 @@ export default function HomeUpload() {
         return;
       }
 
-      try {
+      const upload = async () => {
-        let response;
+        try {
+          let response;
 
-        if (file.directory) {
+          if (file.directory) {
-          const directory = file.files.reduce((acc, file) => ({ ...acc, [getRelativeFilePath(file)]: file }), {});
+            const directory = file.files.reduce((acc, file) => ({ ...acc, [getRelativeFilePath(file)]: file }), {});
 
-          response = await client.uploadDirectory(directory, encodeURIComponent(file.name), { onUploadProgress });
+            response = await client.uploadDirectory(directory, encodeURIComponent(file.name), { onUploadProgress });
-        } else {
+          } else {
-          response = await client.upload(file, { onUploadProgress });
+            response = await client.upload(file, { onUploadProgress });
+          }
+
+          onFileStateChange(file, { status: "complete", url: client.getUrl(response.skylink) });
+        } catch (error) {
+          if (error.response && error.response.status === HttpStatus.TOO_MANY_REQUESTS) {
+            onFileStateChange(file, { progress: -1 });
+
+            return new Promise((resolve) => setTimeout(() => resolve(upload()), 3000));
+          }
+
+          onFileStateChange(file, { status: "error", error: createUploadErrorMessage(error) });
         }
+      };
 
-        onFileStateChange(file, { status: "complete", url: client.getUrl(response.skylink) });
+      upload();
-      } catch (error) {
-        onFileStateChange(file, { status: "error", error: createUploadErrorMessage(error) });
-      }
     });
   };
 

src/components/UploadFile/UploadFile.js

@@ -36,6 +36,14 @@ export default function UploadFile({ file, url, status, progress, error }) {
   };
 
   const copyText = copied ? "Copied!" : "Copy to clipboard";
+  const getProgressText = (progress) => {
+    if (progress === -1) {
+      return "Waiting...";
+    } else if (progress > 0) {
+      return `Uploading ${Math.round(progress * 100)}%`;
+    }
+    return "Uploading...";
+  };
 
   return (
     <div className="upload-file">
@@ -43,7 +51,7 @@ export default function UploadFile({ file, url, status, progress, error }) {
       <div className="upload-file-text">
         <h3>{file.name}</h3>
         <p>
-          {status === "uploading" && (progress ? `Uploading ${Math.round(progress * 100)}%` : "Uploading...")}
+          {status === "uploading" && getProgressText(progress)}
           {status === "processing" && "Processing..."}
           {status === "error" && <span className="red-text">{error || "Upload failed."}</span>}
           {status === "complete" && (