Function for when all files finish uploading.

What problem does this feature solve?

Currently, the Uploader component works such that when a single image finishes uploading, you can latch onto the onSuccess method if individual requests. While this is useful, it's a lot less so when you have, say, ten different images that need to be uploaded to a third-party service and another function should be called once it's done.

I'm trying to build an application with ImageKit so that once all the images are uploaded, a function can be called and I can then send the aggregated responses at once to the server for processing, rather than one by one. (Sending them one at a time creates an additional problem since it's impossible to sort them out on the server without some sort of identifier).

I'd imagine others would find this useful for letting the client know that the process was completed successfully or something like that.

What does the proposed API look like?

My attempt at a solution has been tracking the number of files that have been selected by incrementing a variable every time a new image is added (and decreasing that count if an image is removed), like this:

state = {
    imageCount: 0,
    uploadCount; 0
}

//Every file added to the uploader is counted
handleChange(values){
    this.setState({
          ...this.state,
          imageCount: this.state.imageCount += values.length  
    })
} 

//Since this is called for every individual successful upload, we can just increment it by 1
handleUploadSuccess(){
     this.setState({
           ...this.state,
           uploadCount: this.state.uploadCount += 1    
      })
}

//... logic for removing count... etc.

This suffers from the drawback of being unable to 'listen' using a callback for once every file is uploaded, however, so that an extra button/function has to be added instead. eg.

//...
render(){
    return(
        <div>
            {
                 this.state.imageCount === this.state.uploadCount &&
                 <div>
                         <p>Success message.</p>
                 </div>
             }
        </div>
    )
}

Essentially, it's impossible to have a dynamic function that listens for the completion of every upload/at the very least track the number of successful uploads and the failed ones (if any) . As you might imagine, that would also involve a lot more code.

Instead, the library might contain something like an onCompletion prop so that

handleUploadCompletion(completed, failed){
   if (failed && failed.count){
      console.log(`${failed.count} files failed to upload`, failed.files) //or something
      retry(failed.files);
   }
   
   if (completed && completed.count){
      console.log(`${completed.count} files uploaded successfully`, completed.files )
   }
}