Martin Mazza Dawson Martin Mazza Dawson - 1 year ago 195
jQuery Question

Jquery Dropzone.js change thumbnail width to 100%

I am using Dropzone.js to allow users to upload files to server, according to the specs you can change the thumbnail width as shown below, however I want to change the width to 100% instead of using px, Is this possible?

Because if I do

thumbnailWidth: 100%
it will not recognize % char.

dzImageOptions = Dropzone.options.myDropzone = {
thumbnailWidth: 314, //I want to change width to 100% instead
thumbnailHeight: 314,
init: function (file) {

//Also have to change css or thumbnail won't resize properly .dz-preview .dz-image {
border-radius: 1px;
width: 314px;
height: 314px;

<div class="dropzone song-image"></div>

Answer Source

You cannot specify a percentage on thumbnailWidth and thumbnailHeight. Dropzone uses these values to create the image source to show it as a preview.

But you can leave the thumbnail at the original width and height, setting these values to null(Note that this can cause a bit of lag with high resolution images) and then use the <img> width and height attributes to display the image with the size you want and adjusting the .dz-image container with css.


<div class="dropzone" id="myDropzone"></div>


Dropzone.autoDiscover = false;

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

var myDropzone = new Dropzone('div#myDropzone');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download