upload progress

Author: sparkoo

web/index/src/Uploader/Uploader.js

@@ -1,6 +1,7 @@
 import { React, useState } from 'react';
 import './Uploader.css';
 import { FileUpload } from 'primereact/fileupload';
+import { ProgressBar } from 'primereact/progressbar';
 
 const Uploader = (props) => {
   const [serverHost] = useState(window.location.host.includes("localhost") ? "http://localhost:8080" : "")
@@ -13,47 +14,60 @@ const Uploader = (props) => {
     console.log("progress", filename, event)
   }
 
-  const uploadHandler = function ({ files }) {
+  const uploadChunk = function (chunk, filename, chunkId) {
+    console.log("uploading chunk", filename)
+    
 
-    const uploadChunk = function (chunk, filename, chunkId) {
-      console.log("uploading chunk", filename)
-      let progressBar = {
-        chunkId: chunkId,
-        filename: filename,
-        loaded: 0,
-        total: 0
-      }
-      setUploadProgress([...uploadProgress, progressBar])
+    let formData = new FormData();
+    formData.append("demoFile", chunk, filename);
 
-      let formData = new FormData();
-      formData.append("demoFile", chunk, filename);
-
-      let xhr = new XMLHttpRequest();
-      xhr.upload.addEventListener('progress', (e) => {
-        // TODO: set new state with progresses
-        console.log("progress", filename)
-        progressBar.loaded = e.loaded
-        progressBar.total = e.total
-      });
-      xhr.onreadystatechange = (xhr, event) => {
-        console.log("onreadystatechange", xhr, event)
-      };
-      xhr.open('POST', serverHost + "/match/upload", true);
-      xhr.withCredentials = props.withCredentials;
-      xhr.send(formData);
-    }
+    let xhr = new XMLHttpRequest();
+    xhr.upload.addEventListener('progress', (e) => {
+      // TODO: set new state with progresses
+      console.log("progress", uploadProgress)
+      setUploadProgress((old) => old.map(p => {
+        if (p.chunkId === chunkId) {
+          return {
+            chunkId: chunkId,
+            filename: filename,
+            loaded: e.loaded,
+            total: e.total
+          }
+        } else {
+          return p
+        }
+      }))
+    });
+    xhr.onreadystatechange = (xhr, event) => {
+      console.log("onreadystatechange", xhr, event)
+    };
+    xhr.open('POST', serverHost + "/match/upload", true);
+    xhr.send(formData);
+  }
 
+  const uploadHandler = function ({ files }) {
     const [file] = files;
     const chunkSize = 1024 * 1024 * 30; // 30MB
 
     let start = 0;
     let chunkNo = 0;
     while (start < file.size) {
+      const newUp = {
+        chunkId: chunkNo,
+        filename: file.name + "_" + chunkNo,
+        loaded: 0,
+        total: 0
+      }
+      setUploadProgress(old => [...old, newUp])
       uploadChunk(file.slice(start, start + chunkSize), file.name + "_" + chunkNo, chunkNo++);
       start += chunkSize;
     }
   }
 
+const valueTemplate = function(p, percent) {
+  return p.filename
+}
+
   return (
     <div>
       <FileUpload
@@ -69,7 +83,7 @@ const Uploader = (props) => {
         auto />
       <div>
         {uploadProgress.map((p) => (
-          <div key={p.chunkId}>{p.filename} - {p.loaded}/{p.total}</div>
+          <ProgressBar key={p.chunkId} value={(p.loaded/p.total) * 100} displayValueTemplate={(percent) => valueTemplate(p, percent)} />
         ))}
       </div>
     </div>

web/index/src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { PrimeReactProvider } from "primereact/api";
+import "primereact/resources/themes/lara-light-cyan/theme.css";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(