maybe progress?

frontend/package.json

@@ -68,6 +68,7 @@
     "react-image-gallery": "^1.3.0",
     "react-images": "1.0.0",
     "react-photo-gallery": "^8.0.0",
-    "sass": "^1.70.0"
+    "sass": "^1.70.0",
+    "axios": "^1.7.7"
   }
 }

frontend/src/scripts/index.js

@@ -6,6 +6,7 @@ import { render } from "react-dom";
 import Gallery from "react-photo-gallery";
 import { Modal, ModalGateway } from "react-images";
 import ImageGallery from "react-image-gallery";
+import axios from 'axios';
 
 
 const addr_prefix = "" //"http://localhost:8000"
@@ -25,6 +26,7 @@ class Main extends Component {
             photoIsOpen: false,
             progress: false,
             currentImage: 0,
+            uploadProgress: 0.0,
         };
         fetch(addr_prefix + "/api/results").then(resp => resp.json()).then(json => {
             this.setState({results: json})
@@ -68,11 +70,15 @@ class Main extends Component {
             return;
         }
         this.setState({progress: true})
-        fetch(addr_prefix + api_endpoint, {
-            method:"POST",
-            body: formData,
-        }).then(resp => resp.json()).then(json => {
-            this.setState({progress:false})
+        axios(
+            {
+                method: 'post',
+                url: addr_prefix + api_endpoint,
+                data: formData,
+                onUploadProgress: ({loaded, total}) => this.setState({uploadProgress: loaded/total})
+            }
+        ).then(resp => resp.json()).then(json => {
+            this.setState({progress:false, uploadProgress: 1.0});
             if(json.reason){
                 this.setState({
                     text: json.reason,