With Dropzone.js, I am trying to get image height and width with createImageThumbnails = false. To be more precise, I do not need thumbnails to be created while dropping images because the process bees slow specially when I drop many images at once. I just need to scan height and width of all images that are dropped and save them into a database. But the problem is, when I turn off thumbnail creation, dropzone does not provide image height and width. As per documentation, image height and width are provided after the thumbnail event is triggered. So, quite the opposite to what I need. So as a solution, I would like to be able to get image height and width info as soon as images are dropped into dropzone and there should be no delay for creating thumbnail. Please advise if there is a way out of it.

HTML

<div id="dropzone">
    <form class="dropzone" id = "upload-widget" action = "/demo">
    </form>
</div>

JS

jQuery(document).ready(function($)
{
  var images = Array();

  var item = [];

  Dropzone.options.uploadWidget = {
    autoProcessQueue: false,
    acceptedFiles: 'image/*',
    previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
    createImageThumbnails: false,
    init: function() {
      this.on("addedfile", function(file)
      {
        height = file.height;
        width = file.width;
        item = {Name : file.name, Size:file.size, Height:file.height, Width:file.width};
        images.push(item);
      });
  }
  };

});

With Dropzone.js, I am trying to get image height and width with createImageThumbnails = false. To be more precise, I do not need thumbnails to be created while dropping images because the process bees slow specially when I drop many images at once. I just need to scan height and width of all images that are dropped and save them into a database. But the problem is, when I turn off thumbnail creation, dropzone does not provide image height and width. As per documentation, image height and width are provided after the thumbnail event is triggered. So, quite the opposite to what I need. So as a solution, I would like to be able to get image height and width info as soon as images are dropped into dropzone and there should be no delay for creating thumbnail. Please advise if there is a way out of it.

HTML

<div id="dropzone">
    <form class="dropzone" id = "upload-widget" action = "/demo">
    </form>
</div>

JS

jQuery(document).ready(function($)
{
  var images = Array();

  var item = [];

  Dropzone.options.uploadWidget = {
    autoProcessQueue: false,
    acceptedFiles: 'image/*',
    previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
    createImageThumbnails: false,
    init: function() {
      this.on("addedfile", function(file)
      {
        height = file.height;
        width = file.width;
        item = {Name : file.name, Size:file.size, Height:file.height, Width:file.width};
        images.push(item);
      });
  }
  };

});

• javascript
• jquery
• dropzone.js

1 Answer 1

You could try working with the accept function, along with FileReader(), and the Image() constructor.

Dropzone.options.uploadWidget = {
  autoProcessQueue: false,
  acceptedFiles: 'image/*',
  previewTemplate: '<div class="dz-filename"><span data-dz-name></span></div>',
  createImageThumbnails: false,
  accept: function(file, done) {

    // FileReader() asynchronously reads the contents of files (or raw data buffers) stored on the user's puter.
    var reader = new FileReader();
    reader.onload = (function(entry) {
      // The Image() constructor creates a new HTMLImageElement instance.
      var image = new Image(); 
      image.src = entry.target.result;
      image.onload = function() {

        console.log(this.width);
        console.log(this.height);

      };
    });

    reader.readAsDataURL(file);
    done();
  }
}