added upload statuses (#464)

* Added logic to handle various upload phases * Update apps/old/widget/components/UploadField.jsx Co-authored-by: Megha <100185149+Megha-Dev-19@users.noreply.github.com> * accepted variable name change --------- Co-authored-by: Megha <100185149+Megha-Dev-19@users.noreply.github.com>
NEARBuilders · Jul 8, 2024 · 836c111 · 836c111
1 parent d28a90f
commit 836c111
Showing 1 changed file with 53 additions and 9 deletions.
diff --git a/apps/old/widget/components/UploadField.jsx b/apps/old/widget/components/UploadField.jsx
@@ -1,15 +1,47 @@
+const initialMsg = (
+  <>
+    <i className="bi bi-cloud-upload"></i>
+    <div className="d-flex flex-column gap-2">
+      <p>Choose a file or drag & drop it here.</p>
+      <p className="secondary">JPEG, PNG, PDF, and MP4 formats, up to 50 MB.</p>
+    </div>
+  </>
+);
+
 const [img, setImg] = useState("");
-const [msg, setMsg] = useState("Upload");
+const [displayText, setDisplayText] = useState(initialMsg);
+
+const SpinningIcon = styled.i`
+  animation: spin 0.8s linear infinite;
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
 const uploadFile = (files) => {
-  setMsg("Uploading...");
+  setDisplayText(
+    <>
+      <SpinningIcon className="bi bi-arrow-repeat" />
+      <p>Uploading...</p>
+    </>,
+  );
   asyncFetch("https://ipfs.near.social/add", {
     method: "POST",
     headers: { Accept: "application/json" },
     body: files[0],
   })
     .catch((e) => {
-      console.error(e);
-      setMsg("Failed to upload");
+      console.error("Upload error:", e);
+      setDisplayText(
+        <>
+          <i className="bi bi-exclamation-triangle text-danger"></i>
+          <p>Failed to upload. Please try again.</p>
+        </>,
+      );
     })
     .then((res) => {
       setImg(res.body.cid);
@@ -18,6 +50,22 @@ const uploadFile = (files) => {
           ipfs_cid: res.body.cid,
         });
       }
+      if (res.body.cid) {
+        setDisplayText(
+          <>
+            <i className="bi bi-check-circle text-success"></i>
+            <p>Upload successful!</p>
+          </>,
+        );
+        setTimeout(() => setDisplayText(""), 1500);
+      } else {
+        setDisplayText(
+          <>
+            <i className="bi bi-exclamation-triangle text-danger"></i>
+            <p>Failed to upload. Please try again.</p>
+          </>,
+        );
+      }
     });
 };
 
@@ -102,11 +150,7 @@ const UploadedImage = styled.img`
 
 return (
   <UploadContainer background={background}>
-    <i class="bi bi-cloud-upload"></i>
-    <div className="d-flex flex-column gap-2">
-      <p>Choose a file or drag & drop it here.</p>
-      <p className="secondary">JPEG, PNG, PDF, and MP4 formats, up to 50 MB.</p>
-    </div>
+    {msg}
     <ButtonContainer>
       <Button>
         <Files