add progress bar

front.php

@@ -22,12 +22,15 @@
 <div class=core>
 <h1>File Transfer</h1>
 <div id=dragzone class=dragndrop ondrop="file_dropped(event);" ondragover="return false" ondragenter="change_color_ondrag('ondragenter');" ondragleave="change_color_ondrag('ondragleave');" >
-Drag and Drop your file or <input class="button" type="button" value="Select File" onclick="file_explorer();">
+    <span>Drag and Drop your file or <input class="button" type="button" value="Select File" onclick="file_explorer();"></span>
-<input type="file" id="uploadfile" hidden>
+    <input type="file" id="uploadfile" hidden>
-<br>
+    <small>(Maximum <?php print(formatBytes(_SIZE_LIMIT)); ?>)</small>
-<small>(Maximum <?php print(formatBytes(_SIZE_LIMIT)); ?>)</small>
+    <div id=divresponse></div>
-<br><br><br><br>
+    <div id="progress-container" style="display: none;">
-<div id=divresponse></div><button class="button" id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button>
+        <progress id="progress-bar" max="100" value="0"></progress>
+        <small id="progress-text">0%</small>
+    </div>
+    <button class="button" id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button>
 </div>
 <div class=infobox>
 This tool is usable with <b>curl</b> or <b>wget</b>.<br><br>

script.js

@@ -28,30 +28,69 @@ function copytoclipboard()
         document.execCommand("Copy");
 }
 
-function upload_file(file_obj,file_name) 
+function upload_file(file_obj, file_name) 
 {
-        var divresponse = document.getElementById('divresponse');
+        const divresponse = document.getElementById('divresponse');
-        divresponse.innerHTML = "Uploading file..." ;
+        divresponse.innerHTML = "Uploading file...";
+
+        const copyToClipboard = document.getElementById('copytoclipboard');
+        copyToClipboard.style.visibility = "hidden";
+
+        const progressContainer = document.getElementById('progress-container');
+
+        // Update progress bar
+        const progressBar = document.getElementById('progress-bar');
+        progressBar.value = 0;
+        const progressText = document.getElementById('progress-text');
+        progressText.innerText = "0%";
+        progressContainer.style.display = ''; // <- become visible by style
+        
         const request = async () => {
-                var response =  await fetch('/index.php?name=' + file_name, {
+                // Create XMLHttpRequest for progress tracking
-                        method: 'PUT',
+                const xhr = new XMLHttpRequest();
-                        body: file_obj
+                
+                
+                // Track upload progress
+                xhr.upload.addEventListener('progress', function(e) {
+                        if (e.lengthComputable) {
+                                const percentComplete = Math.round((e.loaded / e.total) * 100);
+                                
+                                if (progressBar && progressText) {
+                                        progressBar.value = percentComplete;
+                                        progressText.innerText = percentComplete + '%';
+                                }
+                        }
                 });
-                var text = await response.text();
+                
-                divresponse.innerHTML = text ;
+                // Handle completion
-                document.getElementById('copytoclipboard').style.visibility = "visible";
+                xhr.addEventListener('load', function() {
-
+                        if (xhr.status === 200) {
-		if (text.startsWith("http")) {
+                                divresponse.innerHTML = xhr.responseText;
-			var fturl = document.getElementsByTagName("fturl");
+                                progressContainer.style.display = 'none';
-			Array.from(fturl).forEach(tag => tag.innerHTML = text);
+                                copyToClipboard.style.visibility = 'visible';
-		}
+                                
-
+                                if (xhr.responseText.startsWith("http")) {
+                                        var fturl = document.getElementsByTagName("fturl");
+                                        Array.from(fturl).forEach(tag => tag.innerHTML = xhr.responseText);
+                                }
+                        } else {
+                                divresponse.innerHTML = "Upload failed. Please try again.";
+                        }
+                });
+                
+                // Handle errors
+                xhr.addEventListener('error', function() {
+                        progressContainer.style.display = 'none';
+                        divresponse.innerHTML = "Upload failed. Please try again.";
+                });
+                
+                // Setup and send request
+                xhr.open('PUT', '/index.php?name=' + encodeURIComponent(file_name));
+                xhr.send(file_obj);
         }
         request();
-
 }
 
-
 function change_color_ondrag(event)
 {
         if (event === "ondragenter") 
@@ -65,4 +104,3 @@ function change_color_ondrag(event)
                 element.classList.remove("dragover");
         }
 }
-

style.css

@@ -34,6 +34,10 @@ h1 {
 }
        
 .dragndrop { 
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
         margin-top: 5%;
         margin-bottom: 3%;
         background-color: #a3a3a3;
@@ -63,6 +67,24 @@ h1 {
         padding: 10px;
 }
 
+#progress-container {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        width: 80%;
+        border-radius: 5px;
+        margin-top: 10px;
+}
+#progress-bar {
+        position: relative;
+        width: 100%;
+        height: 20px;
+        background-color: #eeeeee;
+        border-radius: 5px;
+        transition: width 0.3s;
+}
+
 footer {
         position: absolute;
         padding-top: 10px;