javascript - How to implement Progress Bar and Callbacks with async nature of the FileReader -

i have filereader api called within loop iterate through multiple file objects. i'm using filereader display preview of images.

function() {     (var in files) {         var filereader = new filereader();         filereader.readasbinarystring(files[i]);         filereader.onload = function() {              // on filereader onload          }          filereader.onprogress = function(data) {             if (data.lengthcomputable) {                                                             var progress = parseint( ((data.loaded / data.total) * 100), 10 );                 console.log(progress);             }         }     }      // on completion of filereader process     // actions here run before completion of filereader } 

i'm bumping 2 issues due async nature of filereader api. first, onprogress event fires each filereader instance. gives me progress each file. whereas, intend display total progress files instead of individual files.

secondly, want perform actions should performed when instances (one each file) of filereader have completed. currently, since filereader functioning asynchronously, actions run before filereader completes it's task. have searched lot , yet come across solution these problems. appreciated.

let's address second problem first. need define after-completion code in separate function, , call function once files have uploaded:

function() {     var total = files.length; loaded = 0;     (var in files) {         var filereader = new filereader();         filereader.readasbinarystring(files[i]);         filereader.onload = function() {              // on filereader onload             loaded++;              if (loaded == total){                 onallfilesloaded();             }         }          filereader.onprogress = function(data) {             if (data.lengthcomputable) {                                                             var progress = parseint( ((data.loaded / data.total) * 100), 10 );                 console.log(progress);             }         }     } }  function onallfilesloaded(){     //do stuff files } 

now, tracking progress, there couple different ways address that. right loading files @ once, , each file reporting own progress. if don't mind less frequent progress updates, use onload handler report progress each time file has uploaded. if want fine-grained, accurate progress updates, going have calculate total size of files combined, keep track of how of each file has loaded, , use sum of has loaded each file compared total size of files report progress.

alternatively, assuming implementing progress bar rather console.log, provide separate progress bar each file that's being uploaded, , calculate progress each file you're doing now, updating corresponding progress bar. let me know if of needs clarification.