0

I'm using Dropzone.js to upload an image. When the image is uploaded and I inspect it, it gives me this-

<img data-dz-thumbnail="" alt="AJ-Styles-WWE-2K19-cover-e1533698368369 (1).jpg" src="the_Data_URI">

Hovering over the src part shows the image is 120 X 120 pixels, where as the actual image is 800 X 450 pixels.

What changes do I need to make to Dropzone so as to upload the image of original size and not it's thumbnail size.

manishk
  • 526
  • 8
  • 26
  • 1
    It appears you can have a callback when the thumbnail event happens; see here: https://github.com/enyo/dropzone/wiki/FAQ#reject-images-based-on-image-dimensions – Chris Cousins Aug 22 '18 at 17:31
  • That is true and I tried to limit/put conditions on the max height/width, but src still shows the dimensions of the thumbnail and not of the original image. – manishk Aug 22 '18 at 19:01
  • 1
    I am not sure I understand the question. to clarify, Dropzone uploads the image in its original size, but displays in the preview only a thumbnail, that by default is 120 x 120, you can change the thumbnail dimensions with `thumbnailWidth` and `thumbnailHeight` options, see https://www.dropzonejs.com/#config-thumbnailWidth. if you want the preview to be full size see https://stackoverflow.com/questions/33811498/jquery-dropzone-js-change-thumbnail-width-to-100 – wallek876 Aug 23 '18 at 05:44
  • Thanks that gave me a good direction. I have solved it, and will post the solution as the answer. – manishk Aug 23 '18 at 07:27

1 Answers1

1

The callback function looks like this-

Dropzone.options.myDropzone = {
    url: "UploadImages",
    thumbnailWidth: null,
    thumbnailHeight: null,
    init: function() {
        this.on("thumbnail", function(file, dataUrl) {
            $('.dz-image').last().find('img').attr({width: file.width, height: file.height});
        })
    }
};


Form tag in the body of the html-

<form action="UploadImages" class="dropzone" id="myDropzone" enctype="multipart/form-data"></form>


In this part of the callback, the width attribute is set to file.width and height is set to file.height (that actually solved the problem)-

$('.dz-image').last().find('img').attr({width: file.width, height: file.height});

Now the images uploaded are in their original dimensions, and not the thumbnail default of 120 X 120 pixels.

manishk
  • 526
  • 8
  • 26