File Uploading Progress in Javascript Fetch

Currently it is not possible to get file upload progress for fetch() method.

However going by chromeststatus, it is currently in active development. Probably it may be available within a few months.

Upload progress in fetch() is going to be possible by using a ReadableStream body.

Solution for Now ?

Till the time upload progress is enabled for fetch(), XMLHttpRequest object can be used to get file uploading progress.

<input type="file" id="file-input" />

let data = new FormData();
data.append('file', document.querySelector('#file-input').files[0]);

let request = new XMLHttpRequest();
request.open('POST', '/upload'); 

// upload progress event
request.upload.addEventListener('progress', function(e) {
	// upload progress as percentage
	let percent_completed = (e.loaded / e.total)*100;
	console.log(percent_completed);
});

// request finished event
request.addEventListener('load', function(e) {
	// HTTP status message (200, 404 etc)
	console.log(request.status);

	// request.response holds response from the server
	console.log(request.response);
});

// send POST request to server
request.send(data);