diff --git a/apps/old/widget/components/UploadField.jsx b/apps/old/widget/components/UploadField.jsx index 5786a03c..c783a23e 100644 --- a/apps/old/widget/components/UploadField.jsx +++ b/apps/old/widget/components/UploadField.jsx @@ -1,15 +1,47 @@ +const initialMsg = ( + <> + +
+

Choose a file or drag & drop it here.

+

JPEG, PNG, PDF, and MP4 formats, up to 50 MB.

+
+ +); + const [img, setImg] = useState(""); -const [msg, setMsg] = useState("Upload"); +const [msg, setMsg] = 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..."); + setMsg( + <> + +

Uploading...

+ , + ); 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); + setMsg( + <> + +

Failed to upload. Please try again.

+ , + ); }) .then((res) => { setImg(res.body.cid); @@ -18,6 +50,22 @@ const uploadFile = (files) => { ipfs_cid: res.body.cid, }); } + if (res.body.cid) { + setMsg( + <> + +

Upload successful!

+ , + ); + setTimeout(() => setMsg(""), 1500); + } else { + setMsg( + <> + +

Failed to upload. Please try again.

+ , + ); + } }); }; @@ -102,11 +150,7 @@ const UploadedImage = styled.img` return ( - -
-

Choose a file or drag & drop it here.

-

JPEG, PNG, PDF, and MP4 formats, up to 50 MB.

-
+ {msg}