Compress image by tweaking dropzone.js

Question

I am new to JS, for last few days I am stuck at compressing image at client side. What I want to do is, User drops bunch of images (can be more than 10) at dropzone they should be compressed using JIC and once user clicks a button to upload all the compressed files get uploaded to the server.

So far my code is able to compress and upload only if one image is dropped, but when I drop multiple images all images remain uncompressed but one. I am not sure what wrong I am doing. I have tried to follow the solutions from this post but couldn't achieve my goal. Code I am using is as follows:

Dropzone.autoDiscover=false;
var myDropZone=new Dropzone("#dropzonePreview",{
      url:"/dragdrop",
      autoProcessQueue:false,
      acceptedFiles: 'image/*',
      parallelUploads: 10,

      init:function(){
        this.on('addedfile', function(file){

            _this = this;
            ////console.log("Added File");
            $('#userphoto').css('color', "transparent");
            EXIF.getData(file, function(){ // async call
              var lat=EXIF.getTag(this,"GPSLatitude");
              var lon=EXIF.getTag(this,"GPSLongitude");
              geocoder.geocode( { 'latLng': temp }, function(results, status) { // another async call });
              }
            });

            myReader2 = new FileReader(); // Reading image for compression purpose
            myReader2.onload = function(event) {
                console.log(file.status);
                // var i = new Image();

                var i = document.getElementById("source_image");
                i.src = event.target.result;

                i.onload = function() {
                  var source_image = document.getElementById('source_image');

                  var quality = 70;

                  comp = jic.compress(source_image, 70, "jpg"); // Link to function can be found at the end of code.

                  var editedFile = base64ToFile(comp.src, file); // same function used in mentioned stackoverflow post.

                    // Replace original with resized

                    var origFileIndex = myDropZone.files.indexOf(file);
                    myDropZone.files[origFileIndex] = editedFile;

                    editedFile.status = Dropzone.ADDED;
                    myDropZone.enqueueFile(editedFile);

                    delete source_image;
                };
            };
            myReader2.readAsDataURL(file);
        });

        this.on("sending",function(file,xhr,formData){
          //appending some data to formData
        });

        this.on("complete", function(file){
            // processing like removing objects of file from drop zone
        });
      }
    });

$('#upload').click(function(evt){ // Button that triggers uploading file 
      myDropZone.processQueue();
}

Link to function. Your help would be really appreciated. Thank you.

Answer 1

I have found this issue solution. it's work for me.

Please check

function base64ToFile(dataURI, origFile) {
  var byteString, mimestring;

  if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
    byteString = atob(dataURI.split(',')[1]);
  } else {
    byteString = decodeURI(dataURI.split(',')[1]);
  }

  mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0];

  var content = new Array();
  for (var i = 0; i < byteString.length; i++) {
    content[i] = byteString.charCodeAt(i);
  }

  var newFile = new File(
    [new Uint8Array(content)], origFile.name, {type: mimestring}
  );


  // Copy props set by the dropzone in the original file

  var origProps = [ 
    "upload", "status", "previewElement", "previewTemplate", "accepted" 
  ];

  $.each(origProps, function(i, p) {
    newFile[p] = origFile[p];
  });

  return newFile;
}
Dropzone.autoDiscover = false;
jQuery(document).ready(function($) {

var myDropZone=new Dropzone("#dropzonePreview",{
     url:"/dragdrop",
     autoProcessQueue:false,
     acceptedFiles: 'image/*',
     parallelUploads: 10,

      init:function(){

        this.on("sending",function(file,xhr,formData){

        });
        this.on("complete", function(file){

        });
      }

     });
myDropZone.on("addedfile", function(file) {

        var reader = new FileReader();

        reader.addEventListener("load", function(event) {

          var origImg = new Image();
          origImg.src = event.target.result;

          origImg.addEventListener("load", function(event) { 
            comp = jic.compress(origImg, 30, "jpg");  
            var resizedFile = base64ToFile(comp.src, file);
            var origFileIndex = myDropZone.files.indexOf(file);
            myDropZone.files[origFileIndex] = resizedFile;
            myDropZone.enqueueFile(resizedFile);
          });
        });
        reader.readAsDataURL(file);
      });
$('#upload').click(function(e){ // Button that triggers uploading file 
    e.preventDefault();
    myDropZone.processQueue();  
});

});