How can I track the progress of a file upload using the Fetch API?

How can I track the progress of a file upload using the Fetch API?

You can track the progress of a file upload by using the XMLHttpRequest object along with the Fetch API. The Fetch API itself doesn't provide progress tracking, but you can use XMLHttpRequest to achieve this.

Can you show me an example of how to implement that?

Sure! Here's a simple example:

const formData = new FormData();
formData.append('file', fileInput.files[0]);

const xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', (event) => {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Upload progress: ${percentComplete}%`);
    }
});

xhr.open('POST', '/upload');
xhr.send(formData);

What if I want to use the Fetch API instead?

If you want to use the Fetch API, you can still track progress by using the ReadableStream interface, but it's a bit more complex. Would you like to see an example of that?