Added a progress bar

index.php

@@ -23,6 +23,10 @@
         </div>
       </label>
       <input id="upload" type="file" class="d-none">
+      <div class="progress">
+        <div id="progress" class="progress-bar d-none" role="progressbar"></div>
+      </div>
+
 
       <div class="list-group shadow rounded">
         <?php
@@ -106,6 +110,7 @@
       <br><br>
     </div>
     
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     <!-- Optional JavaScript -->
     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
     <script src="jquery-3.6.0.min.js"></script>

main.js

@@ -17,12 +17,25 @@ buttons.forEach((button) => {
 });
 
 const fileInput = document.getElementById('upload');
+const progressBar = document.getElementById('progress');
 fileInput.addEventListener('change', async function (event) {
     const file = event.target.files[0];
     let formData = new FormData();
     formData.append("file", file);
-    const response = await fetch('upload.php', { method: "POST", body: formData });
-    if (response.status === 200) {
+    // const response = await fetch('upload.php', { method: "POST", body: formData });
+    // if (response.status === 200) {
+    //     window.location.reload(false);
+    // }
+    axios.request({
+        method: "post",
+        url: "upload.php", 
+        data: formData,
+        headers: { "Content-Type": "multipart/form-data" },
+        onUploadProgress: (p) => {
+            progressBar.style.display = 'block';
+            progressBar.style.width = `${p.loaded / p.total}%`;
+        }
+    }).then (data => {
         window.location.reload(false);
-    }
+    })
 });