Working single file upload

static/script.js

@@ -1,4 +1,16 @@
-function uploadFiles(submitButtonID, fileInputID, progressBarID, targetEndpoint, otherData) {
+function updatePercentage(input_percent, progressBarContainerID, progressBarID) {
+    const clampedPercentage = Math.min(100, Math.max(0, input_percent))
+
+    const progressBar = document.getElementById(progressBarID)
+    const progressContainer = document.getElementById(progressBarContainerID)
+
+    progressBar.style.width = `${clampedPercentage}%`
+    progressContainer.setAttribute('aria-valuenow', clampedPercentage)
+
+    progressBar.textContent = `${clampedPercentage}%`
+}
+
+function uploadFiles(submitButtonID, fileInputID, progressBarContainerID, progressBarID, targetEndpoint, otherData) {
     const submitButton = document.getElementById(submitButtonID)
     submitButton.disabled = true
 
@@ -33,7 +45,8 @@ function uploadFiles(submitButtonID, fileInputID, progressBarID, targetEndpoint,
     xhr.upload.onprogress = function(event) {
         if(event.lengthComputable) {
             const percentComplete = (event.loaded / event.total) * 100
-            document.getElementById(progressBarID).value = percentComplete
+            
+            updatePercentage(percentComplete, progressBarContainerID, progressBarID)
         }
     }
     xhr.onerror = function() {