Elijah/convertor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #233 from Lacni135/feature-progress

Browse source 
Added progress bar for file upload
This commit is contained in:
Emrik Östling 2025-02-28 09:57:39 +01:00 • committed by GitHub
commit a8ed60d48f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 257 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

63
public/script.js
View file

@ -118,6 +118,7 @@ fileInput.addEventListener("change", (e) => {
const row = document.createElement("tr"); const row = document.createElement("tr");
row.innerHTML = ` row.innerHTML = `
<td>${file.name}</td> <td>${file.name}</td>
<td><progress max="100"></progress></td>
<td>${(file.size / 1024).toFixed(2)} kB</td> <td>${(file.size / 1024).toFixed(2)} kB</td>
<td><a onclick="deleteRow(this)">Remove</a></td> <td><a onclick="deleteRow(this)">Remove</a></td>
`; `;
@ -153,11 +154,15 @@ fileInput.addEventListener("change", (e) => {
// Append the row to the file-list table // Append the row to the file-list table
fileList.appendChild(row); fileList.appendChild(row);
//Imbed row into the file to reference later
file.htmlRow = row;
// Append the file to the hidden input // Append the file to the hidden input
fileNames.push(file.name); fileNames.push(file.name);
}
uploadFiles(files); uploadFile(file);
}
}); });
const setTitle = () => { const setTitle = () => {
@ -197,33 +202,49 @@ const deleteRow = (target) => {
.catch((err) => console.log(err)); .catch((err) => console.log(err));
}; };
const uploadFiles = (files) => { const uploadFile = (file) => {
convertButton.disabled = true; convertButton.disabled = true;
convertButton.textContent = "Uploading..."; convertButton.textContent = "Uploading...";
pendingFiles += 1; pendingFiles += 1;
const formData = new FormData(); const formData = new FormData();
formData.append("file", file, file.name);
for (const file of files) { let xhr = new XMLHttpRequest();
formData.append("file", file, file.name);
}
fetch(`${webroot}/upload`, { xhr.open("POST", `${webroot}/upload`, true);
method: "POST",
body: formData, xhr.onload = (e) => {
}) let data = JSON.parse(xhr.responseText);
.then((res) => res.json())
.then((data) => { pendingFiles -= 1;
pendingFiles -= 1; if (pendingFiles === 0) {
if (pendingFiles === 0) { if (formatSelected) {
if (formatSelected) { convertButton.disabled = false;
convertButton.disabled = false;
}
convertButton.textContent = "Convert";
} }
console.log(data); convertButton.textContent = "Convert";
}) }
.catch((err) => console.log(err));
//Remove the progress bar when upload is done
let progressbar = file.htmlRow.getElementsByTagName("progress");
progressbar[0].parentElement.remove();
console.log(data);
};
xhr.upload.onprogress = (e) => {
let sent = e.loaded;
let total = e.total;
console.log(`upload progress (${file.name}):`, (100 * sent) / total);
let progressbar = file.htmlRow.getElementsByTagName("progress");
progressbar[0].value = ((100 * sent) / total);
};
xhr.onerror = (e) => {
console.log(e);
};
xhr.send(formData);
}; };
const formConvert = document.querySelector(`form[action='${webroot}/convert']`); const formConvert = document.querySelector(`form[action='${webroot}/convert']`);