CODEWITHSUNDEEP
javascriptimagedropzone.js
manishk
manishk

Reputation: 536

Get the Data URI of the full sized image (not the thumbnail size) from Dropzone.js

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.

Upvotes: 0

Views: 1832

Answers (1)

manishk
manishk

Reputation: 536

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.

Upvotes: 1

Related Questions