upload progress status (#73)

* add upload progress status

* resolve cors issues with proxy returning cors error

setup-scripts/skynet-nginx.conf

@@ -22,7 +22,8 @@ server {
 		# proxy this call to siad endpoint (make sure the ip is correct)
 		proxy_pass http://127.0.0.1:9980;
 		proxy_set_header Expect $http_expect;
-		proxy_set_header Access-Control-Allow-Origin: *;
+		add_header Access-Control-Allow-Origin *;
+		proxy_hide_header Access-Control-Allow-Origin;
 		# make sure to override user agent header - siad requirement
 		proxy_set_header User-Agent: Sia-Agent; 
 		# replace BASE64_AUTHENTICATION with base64 encoded <user>:<password>

src/components/HomeUpload/HomeUpload.js

@@ -7,6 +7,7 @@ import { Button, UploadFile } from "../";
 import { Deco3, Deco4, Deco5, Folder, DownArrow } from "../../svg";
 import "./HomeUpload.scss";
 import AppContext from "../../AppContext";
+import axios from "axios";
 
 export default function HomeUpload() {
   const [files, setFiles] = useState([]);
@@ -15,7 +16,7 @@ export default function HomeUpload() {
   const handleDrop = async (acceptedFiles) => {
     setFiles((previousFiles) => [...acceptedFiles.map((file) => ({ file, status: "uploading" })), ...previousFiles]);
 
-    const onComplete = (file, status, skylink) => {
+    const onFileStateChange = (file, state) => {
       setFiles((previousFiles) => {
         const index = previousFiles.findIndex((f) => f.file === file);
 
@@ -23,26 +24,33 @@ export default function HomeUpload() {
           ...previousFiles.slice(0, index),
           {
             ...previousFiles[index],
-            status,
-            url: `${apiUrl}/${skylink}`
+            ...state
           },
           ...previousFiles.slice(index + 1)
         ];
       });
     };
 
+    const onProgress = (file, { loaded, total }) => {
+      const progress = loaded / total;
+      const status = progress === 1 ? "processing" : "uploading";
+
+      onFileStateChange(file, { status, progress });
+    };
+
     acceptedFiles.forEach(async (file) => {
       try {
         const fd = new FormData();
         fd.append("file", file);
 
         const uuid = shortid.generate();
-        const response = await fetch(`${apiUrl}/skynet/skyfile/${uuid}`, { method: "POST", body: fd });
-        const { skylink } = await response.json();
+        const { data } = await axios.post(`${apiUrl}/skynet/skyfile/${uuid}`, fd, {
+          onUploadProgress: (event) => onProgress(file, event)
+        });
 
-        onComplete(file, "complete", skylink);
+        onFileStateChange(file, { status: "complete", url: `${apiUrl}/${data.skylink}` });
       } catch (error) {
-        onComplete(file, "error");
+        onFileStateChange(file, { status: "error" });
       }
     });
   };

src/components/UploadFile/UploadFile.js

@@ -4,7 +4,7 @@ import "./UploadFile.scss";
 import { LoadingSpinner } from "../";
 import { File, FileCheck, FileError, Copy } from "../../svg";
 
-export default function UploadFile({ file, url, status }) {
+export default function UploadFile({ file, url, status, progress }) {
   const [copied, setCopied] = useState(false);
   const urlRef = useRef(null);
 
@@ -43,7 +43,7 @@ export default function UploadFile({ file, url, status }) {
       <div className="upload-file-text">
         <h3>{file.name}</h3>
         <p>
-          {status === "uploading" && "Uploading..."}
+          {status === "uploading" && (progress ? `Uploading ${Math.round(progress * 100)}%` : "Uploading...")}
           {status === "processing" && "Processing..."}
           {status === "error" && <span className="red-text">Error processing file.</span>}
           {status === "complete" && (
@@ -78,5 +78,6 @@ UploadFile.propTypes = {
     name: PropTypes.string.isRequired
   }),
   status: PropTypes.string.isRequired,
-  url: PropTypes.string
+  url: PropTypes.string,
+  progress: PropTypes.number
 };