VirtIT/web-ft
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

add progress bar

Browse Source
This commit is contained in:
Beu
2025-07-31 10:00:20 +02:00
parent 773e13a441
commit 0c32bbbc57
3 changed files with 87 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
front.php
View File

@@ -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();">
<input type="file" id="uploadfile" hidden>
<br>
<small>(Maximum <?php print(formatBytes(_SIZE_LIMIT)); ?>)</small>
<br><br><br><br>
<div id=divresponse></div><button class="button" id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button>
<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>
<small>(Maximum <?php print(formatBytes(_SIZE_LIMIT)); ?>)</small>
<div id=divresponse></div>
<div id="progress-container" style="display: none;">
<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>

70
script.js
View File

@@ -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');
divresponse.innerHTML = "Uploading file..." ;
const divresponse = document.getElementById('divresponse');
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, {
method: 'PUT',
body: file_obj
// Create XMLHttpRequest for progress tracking
const xhr = new XMLHttpRequest();
// 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 ;
document.getElementById('copytoclipboard').style.visibility = "visible";
if (text.startsWith("http")) {
var fturl = document.getElementsByTagName("fturl");
Array.from(fturl).forEach(tag => tag.innerHTML = text);
}
// Handle completion
xhr.addEventListener('load', function() {
if (xhr.status === 200) {
divresponse.innerHTML = xhr.responseText;
progressContainer.style.display = 'none';
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");
}
}

22
style.css
View File

@@ -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;