Multiple image upload to create thumbnail and store original, using filepicker

Question

I am using filepicker.js library to store my images. User can upload a set of images using filepicker.pickMultiple() function. And I use the callback function to pick image urls and iterate through each url from the json response and use crop tool filepicker.processImage() to upload the cropped thumbnail.

filepicker.pickMultiple(
 function(urlList){
  var list="";
  var urlLength=urlList.length;
  var counter = 0;
  urlList.forEach(function (urlBlob,index) {
    filepicker.processImage(urlBlob.url,{},
      function(blob){
        counter++;
        list += "," +urlBlob.url + ";" + blob.url ;
        if(urlLength == counter ){alert(list)};
      } ,
      function(){
        counter++;
        list += "," +urlBlob.url + ";" + urlBlob.url ;
        if(urlLength == counter ){alert(list)};
      });
  });
});

The above code uploads multiple images properly and gives array of url information about the uploaded images. Then I iterate through each image url and use filepicker.processImage() to crop ech image .But the above code crops only the first image. Only one window appears for cropping image which has the first uploaded image. I would like to get my output as a list string which has this format "originalImageUrl;croppedImageUrl" .

Any help to figure out the issue?