Jquery Dropzone.js change thumbnail width to 100%

Question

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
    .dropzone.song-image .dz-preview .dz-image {
    border-radius: 1px;
    width: 314px;
    height: 314px;
}

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

Acrylic

Answer 1

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.

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

Mcandrew

Answer 2

I needed to accomplish responsive thumbnails with dropzone and this post helped a lot. I also needed to do it without jquery, so here's what I came up with. Figured I'd share if it helps anyone else.

My dropzone init function looks like this:

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'm not a javascript wizard so there is probably a more efficient or better way to do this. Please share!

Orotund

Answer 3

After trying for a significant time, the following change worked for me.

HTML code :

<form action="/" class="dropzone" method="post" id="myAwesomeDropzone">

                                </form>

JS code :

            Dropzone.autoDiscover = false;

        $(document).ready(function()
        {

            debugger;

            $("form#myAwesomeDropzone").dropzone ({

                acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",

                thumbnailWidth: null,

                thumbnailHeight: null,

                init:function()
                {

                    debugger;

                    var self = this;

                    self.on("thumbnail", function(file, dataUrl)
                    {

                        debugger;

                        $('.dz-preview').css({"width":"100%", "height":"150px", "margin":"0px"});
                        $('.dz-image').css({"width":"100%", "height":"150px"});

                    }),

                    self.on("success", function(file)
                    {

                        debugger;

                        $('.dz-image').css({"width":"240px", "height":"240px"});

                    })

                }

            });

        });

Duffey

Answer 4

Based on @wallek876 answer, I try a simpler way to do this. I'll go straight to the relevant part:

init: function() {
    this.on("success", function(file) {
        $('.dz-image img').css({"width":"100%", "height":"auto"});
    })
}

Walhalla

Answer 5

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

Gilman

I don't see any elements in the question with an ID of "file128_dropzone". Pretty sure this code won't do anything... – Rockbound