Monitoring progress

As long as you're downloading or uploading small files, it's unlikely that the user will actually notice the length of time it takes to perform the operation. But once you transfer even moderately sized files, the time the operation takes will begin to be noticeable. As such, you're going to need a way to communicate the progress to the user.

How you do this is entirely up to you. You could just display a spinner or you could display a progress bar of some sort. But before any of these, we will have to listen for progress updates from our operation.

Note

The snippets in this section are located at snippets/09/ex3-progress in the code package of this book. When using the interactive snippet playground, select 9: Transferring Files and example 3.

Registering to receive progress updates is pretty simple. Once we've created an instance of FileTransfer, we can assign a handler to the onprogress property, as follows:

function reportProgress(progressEvent) {
  // we'll be adding...