Merge pull request #241 from NebulousLabs/gracefully-handle-429

Gracefully handle upload 429 Too Many Requests

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,6 +120,7 @@ export default function HomeUpload() {
         return;
       }
 
+      const upload = async () => {
         try {
           let response;
 
@@ -133,8 +134,17 @@ export default function HomeUpload() {
 
           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) });
         }
+      };
+
+      upload();
     });
   };
 

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" && (