64 lines
1.4 KiB
JavaScript
64 lines
1.4 KiB
JavaScript
async function uploadFile(event) {
|
|
event.preventDefault();
|
|
|
|
const file = fileInput.files[0];
|
|
if (!file) {
|
|
alert("Please select a file.");
|
|
return;
|
|
}
|
|
|
|
// Existing file validation code...
|
|
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
|
|
// Create a custom reader function
|
|
const reader = file.stream().getReader();
|
|
const totalLength = file.size;
|
|
|
|
let uploaded = 0;
|
|
|
|
// Create a readable stream and use the custom reader function
|
|
const uploadStream = new ReadableStream({
|
|
async start(controller) {
|
|
while (true) {
|
|
const { done, value } = await reader.read();
|
|
if (done) break;
|
|
|
|
uploaded += value.length;
|
|
let percentUploaded = (uploaded / totalLength * 100).toFixed(2);
|
|
|
|
// Update progress bar and label
|
|
progressBar.value = percentUploaded;
|
|
progressLabel.innerHTML = `${percentUploaded}%`;
|
|
|
|
controller.enqueue(value);
|
|
}
|
|
controller.close();
|
|
},
|
|
});
|
|
|
|
// Create a new Request with the readable stream as body
|
|
const req = new Request('/update', {
|
|
method: 'POST',
|
|
body: uploadStream,
|
|
headers: {
|
|
// Add any relevant headers here
|
|
},
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(req);
|
|
|
|
if (response.ok) {
|
|
alert('Upload completed!');
|
|
progressLabel.innerHTML = "Completed!";
|
|
} else {
|
|
alert('An error occurred during the upload.');
|
|
progressLabel.innerHTML = "Error!";
|
|
}
|
|
} catch (error) {
|
|
console.error('Upload failed:', error);
|
|
}
|
|
}
|
|
|