How to upload a file and track it's progress on the client-side?
I send a file with the following function:
I'm unsure how I can get the file on the api side and write it to disk, or delete the temp file if the upload is aborted. Any tips?
const uploadFile = async (thatFile) => {
// Use a custom TransformStream to track upload progress
const progressTrackingStream = new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk);
bytesUploaded += chunk.byteLength;
thatFile.uploaded += chunk.byteLength;
},
flush(controller) {
console.log('completed stream');
}
});
const response = await fetch("/api/upload", {
method: "POST",
headers: {
"Content-Type": "application/octet-stream"
},
body: thatFile.file.stream().pipeThrough(progressTrackingStream),
});
const json = await response.json();
console.log(json)
};const uploadFile = async (thatFile) => {
// Use a custom TransformStream to track upload progress
const progressTrackingStream = new TransformStream({
transform(chunk, controller) {
controller.enqueue(chunk);
bytesUploaded += chunk.byteLength;
thatFile.uploaded += chunk.byteLength;
},
flush(controller) {
console.log('completed stream');
}
});
const response = await fetch("/api/upload", {
method: "POST",
headers: {
"Content-Type": "application/octet-stream"
},
body: thatFile.file.stream().pipeThrough(progressTrackingStream),
});
const json = await response.json();
console.log(json)
};I'm unsure how I can get the file on the api side and write it to disk, or delete the temp file if the upload is aborted. Any tips?
