diff --git a/setup-scripts/skynet-nginx.conf b/setup-scripts/skynet-nginx.conf index f1593a5e..68e223e5 100644 --- a/setup-scripts/skynet-nginx.conf +++ b/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 : diff --git a/src/components/HomeUpload/HomeUpload.js b/src/components/HomeUpload/HomeUpload.js index e8fd4a74..48f2193b 100644 --- a/src/components/HomeUpload/HomeUpload.js +++ b/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" }); } }); }; diff --git a/src/components/UploadFile/UploadFile.js b/src/components/UploadFile/UploadFile.js index 09b4c08d..4ac2860d 100644 --- a/src/components/UploadFile/UploadFile.js +++ b/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 }) {

{file.name}

- {status === "uploading" && "Uploading..."} + {status === "uploading" && (progress ? `Uploading ${Math.round(progress * 100)}%` : "Uploading...")} {status === "processing" && "Processing..."} {status === "error" && Error processing file.} {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 };