I am trying create drop zones programmatically, but it doesn't 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>

The drop zone in <div id="myDropZone"> not appers!

best regards :)

I am trying create drop zones programmatically, but it doesn't 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>

The drop zone in <div id="myDropZone"> not appers!

best regards :)

• javascript
• jquery
• dropzone.js

2 Answers 2

You need to give your #myDropZone div some width and height so that it takes up space. Heres a jsfiddle.

Alternatively, you can add the dropzone class to your div to get the default styling that you see in the demos. Heres the jsfiddle for that.

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