Tracking progress when uploading files

Is it possible to listen to the upload progress event given by the xhr object?

Normally it is done like this:

xhr.upload.addEventListener('progress', handler);

I know that the xhr object is returned by end() and in the response object. The latter fires only when the response is received though (which makes sense).

Any ideas?

[rexxars]

Yes. superagent fires progress events through it’s eventemitter.

Basically:

request
   .post('/api/file')
   .send(someFile)
   .on('progress', function(e) {
      console.log('Percentage done: ', e.percent);
   }
   .end(function(res){
     if (res.ok) {
       alert('yay got ' + JSON.stringify(res.body));
     } else {
       alert('Oh no! error ' + res.text);
     }
   });

See https://github.com/visionmedia/superagent/blob/master/lib/client.js#L756-L770

[alexsasharegan]

@similityman Alternative to @teonik’s solution, you can use a bound function (arrow function) when attach the superagent onprogress handler. This can also give you a chance to bind extra params to your onprogress handler if you need references to anything.

// without extra params
req.on( 'progress', event => this.onProgress( event ) );

// with extra reference to the files array
req.on( 'progress', event => this.onProgress( event, files ) );

I personally chose to fire off individual requests for each file upload in my own app so I could render progress per file. I used the second method to bind a uuid to each file so I could map the progress emitted to the correct file in the uploading queue. Not sure how valuable copy/pasting that example will be, but hey… sharing is caring!

// from inside my Uploader component wrapping DropZone...
/**
 * Proxied handler function for the DropZone's native 'onDrop' method.
 * Called with an array of files uploaded.
 * Sets up component state to handle progress bars,
 * and uses uuid's to make unique keys on potential
 * files with identical names.
 *
 * @param files
 */
uploadFiles( files ) {
    const filesToUpload = files.map( ( file ) => {
        return { name: file.name, percent: 0, uuid: uuid.v4(), timestamp: Date.now(), data: file };
    } );
    
    this.setState( {
        isUploading: true,
        files: [ ...this.state.files, ...filesToUpload ],
    } );
    
    let promises = filesToUpload.map( file => this.uploadFile( file ) );
    
    Promise.all( promises ).then( () => {
        this.setState( { isUploading: false } );
        this.onUploadComplete();
    } );
}

/**
 * By attaching each file to an individual ajax call,
 * we are able to bind our unique keys to the progress events
 * and render progress on each individual file.
 *
 * @param file
 * @returns {Promise}
 */
uploadFile( file ) {
    return (
        request.post( this.props.uploadURI )
               .attach( file.name, file.data )
               .on( 'progress', ( event ) => this.onUploadProgress( file.uuid, event.percent ) )
    );
}