How to customize dropzone area in DropzoneJs?

Question

This is current behavior:

I need to customize the height of the dropzone area like bellow.

How can I customize the height and width of this dropzone area? I have no clue to solve it. please help.

Answer 1

Using something like:

<div id="dropzone-file-upload" class="dropzone" style="height:200px"></div>

Or create a CSS class if you need to do height and width to make the HTML easier to read.

I will warn you though that this doesn't scale the thumbnails of the files uploaded. I suggest you either add a zoom: x or look at https://www.dropzonejs.com/#configuration-options for thumbnailWidth and thumbnailHeight to be defined in your JavaScript