Node.js › File Uploads & Media Processing
How would you implement a progress indicator for a large file upload from the client's perspective, given the Node.js server side?
IntermediateAnswer
Upload progress tracking primarily happens client-side (using the browser's XMLHttpRequest upload.onprogress event or fetch with a ReadableStream), since the browser has direct visibility into how much of the request body has actually been sent -- server-side, you can additionally track how many bytes have been received so far (useful for logging or a websocket-pushed progress update to other connected clients), typically by listening to data events on the raw incoming request stream before it's fully parsed by multer.
// Client-side (the primary mechanism for progress)
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (event) => {
const percent = (event.loaded / event.total) * 100;
updateProgressBar(percent);
};
xhr.open('POST', '/upload');
xhr.send(formData);Real-world example A file-upload UI shows a real-time progress bar using the browser's XMLHttpRequest upload progress event, giving users clear feedback during a large file transfer, entirely independent of anything the Node.js server needs to do differently to support it.