Dropzone.js does not work programmatically

Question

I am trying to create drop zones programmatically, but this does not work.

HTML code:

<div class="content-wrap"> <div class="row"> <script type="text/javascript"> $(function() { $("div#myDropZone").dropzone({ url : "/file-upload" }); }); </script> <div class="col-sm-12"> <div class="nest" id="DropZoneClose"> <div class="title-alt"> <h6>DropZone</h6> </div> <div class="body-nest" id="DropZone"> <div id="myDropZone" > </div> <button style="margin-top: 10px;" class="btn btn-info" id="submit-all">Submit all files</button> </div> </div> </div> </div> </div> 

A drop of zone does not appear in <div id="myDropZone"> !

with best wishes:)

Answer 1

You need to specify the #myDropZone div width and height so that it #myDropZone space. Heres a jsfiddle .

Alternatively, you can add the dropzone class to your div to get the default style that you see in demos. It uses jsfiddle .

Answer 2

Add the dropzone class to the div element that contains your drop zone. Hope you have added dropzone to your page.