diff options
| -rw-r--r-- | client/assets/index.js | 21 | ||||
| -rw-r--r-- | client/assets/styles.css | 18 | ||||
| -rw-r--r-- | client/index.html | 3 |
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> |