JQuery Dropzone.js changes the width of the sketch to 100%

Question

I use Dropzone.js so that users can upload files to the server, according to the specifications you can change the width of the thumbnails as shown below, however I want to change the width to 100% instead of using px. Is it possible?

Because if I do this 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 .dropzone.song-image .dz-preview .dz-image { border-radius: 1px; width: 314px; height: 314px; } <div class="dropzone song-image"></div> 

Answer 1

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

But you can leave the thumbnail with the original width and height by setting these values ​​to null (note that this may cause a slight delay with high resolution images), and then use the <img> width and height attributes to display the image with the desired size and configure the .dz-image container with css.

html:

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

JS:

 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'); 

Answer 2

I needed to make flexible thumbnails with dropzone, and this post really helped. I also needed to do this without jquery, so here is what I came up with. It’s clear that I will share it if it helps someone else.

My dropzone initialization function is as follows:

 init: function () { this.on('thumbnail', function(file, dataUrl) { var thumbs = document.querySelectorAll('.dz-image'); [].forEach.call(thumbs, function (thumb) { var img = thumb.querySelector('img'); if (img) { img.setAttribute('width', '100%'); img.setAttribute('height', '100%'); } }); }), this.on('success', function(file) { var thumbs = document.querySelectorAll('.dz-image'); [].forEach.call(thumbs, function (thumb) { thumb.style = 'width: 100%; height: auto;'; }); }) } 

I am not a javascript master, so there may be a more efficient or better way to do this. Please share!

Answer 3

 var myDropZone = jQuery("#file128_dropzone").get(0).dropzone; myDropZone.options.thumbnailWidth = 250; myDropZone.options.thumbnailHeight = 250;