feat: add progress bar while uploading

3 files changed, 39 insertions, 3 deletions

diff --git a/client/assets/index.js b/client/assets/index.js
index 680b257..fc53eae 100644
--- a/client/assets/index.js
+++ b/client/assets/index.js
@@ -12,7 +12,7 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 const baseUrl = window.location.origin;
-const CHUNK_SIZE = 100* 1024 * 1024; // 100 MB
+const CHUNK_SIZE = 100 * 1024 * 1024; // 100 MB
 
 async function displayFileDetails(fileId, key) {
     try {
@@ -80,20 +80,31 @@ function setupUploadForm() {
             return;
         }
 
+        const progressBar = document.getElementById('upload__progress');
+        const progressFill = document.getElementById('progress__fill');
+        const uploadButton = document.getElementById('upload__btn');
+
+        uploadButton.style.display = 'none';
+        progressBar.style.display = 'block';
+
         try {
-            await uploadFileInChunks(file);
+            await uploadFileInChunks(file, progressFill);
         } catch (error) {
             console.error('Error:', error);
             document.getElementById('upload__result').textContent = 'An error occurred. Please try again.';
             document.getElementById('upload__result').classList.add('upload__result__visible');
+        } finally {
+            progressBar.style.display = 'none';
+            uploadButton.style.display = 'inline-block';
         }
     });
 }
 
-async function uploadFileInChunks(file) {
+async function uploadFileInChunks(file, progressFill) {
     const fileSize = file.size;
     const chunkCount = Math.ceil(fileSize / CHUNK_SIZE);
     const uploadId = generateUploadId();
+    let uploadedSize = 0;
 
     for (let chunkIndex = 0; chunkIndex < chunkCount; chunkIndex++) {
         const start = chunkIndex * CHUNK_SIZE;
@@ -115,6 +126,10 @@ async function uploadFileInChunks(file) {
         if (!response.ok) {
             throw new Error(`Error uploading chunk ${chunkIndex}: ${response.statusText}`);
         }
+
+        uploadedSize += chunk.size;
+        const progress = Math.round((uploadedSize / fileSize) * 100);
+        progressFill.style.width = `${progress}%`;
     }
 
     // Call upload_complete endpoint
diff --git a/client/assets/styles.css b/client/assets/styles.css
index 983ca51..c5b1dcc 100644
--- a/client/assets/styles.css
+++ b/client/assets/styles.css
@@ -110,6 +110,24 @@ body {
     opacity: 1;
 }
 
+.upload__progress {
+    width: 90%;
+    height: 20px;
+    background-color: #a89984;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 1rem;
+    position: absolute;
+    bottom: 5%;
+}
+
+.upload__progress__fill {
+    height: 100%;
+    width: 0;
+    background-color: #504945;
+    transition: width 0.2s ease-in-out;
+}
+
 a {
     text-decoration: none;
     color: inherit;
diff --git a/client/index.html b/client/index.html
index 82614e9..4cec1db 100644
--- a/client/index.html
+++ b/client/index.html
@@ -19,6 +19,9 @@
           <p class="upload__input__overlay__text">Choose a file or drag it here</p>
         </div>
         <input type="file" class="upload__input" name="file">
+        <div class="upload__progress" id="upload__progress" style="display: none;">
+          <div class="upload__progress__fill" id="progress__fill"></div>
+        </div>
         <button type="submit" class="upload__button" id="upload__btn">Upload</button>
       </div>
     </form>