Send write stream progress to user

Question

This is my code:

router.post('/videoUpload', (req, res) => {
    const filePath = __dirname + '/uploads'
    return new Promise((resolve, reject) => {
        const stream = fs.createWriteStream(filePath);
        stream.on('open', () => {
            console.log('Stream open ...  0.00%');
            req.pipe(stream);
        });
        stream.on('drain', () => {
            const written = parseInt(stream.bytesWritten);
            const total = parseInt(req.headers['content-length']);
            const pWritten = ((written / total) * 100).toFixed(2);
            console.log(`Processing  ...  ${pWritten}% done`);
        });
        stream.on('close', () => {
            console.log('Processing  ...  100%');
            resolve(filePath);
        });
        stream.on('error', err => {
            console.error(err);
            reject(err);
        });
    });
})

This code is console logging the progress in server, but I want the user to see the progress not in server. How can this be done?

Answer 1

Well we don't need to get response from server, Just saw axios provides an option to view how much data has been uploaded like this:

const formdata = new FormData()
formdata.append('file', e.target.files[0])
console.log(formdata)
const data = await axios.post('/api/videoUpload', formdata, {
  headers: { 'Content-Type': 'multipart/form-data' },
  onUploadProgress: p => console.log(((p.loaded / p.total) * 100).toFixed(2))
})