dropzone.js programmatically doesn't work

Question

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 :)

Position

Answer 1

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.

Rarefaction

go-oleg Just one more question. I have a form and inside my drop zone. Why I need the url parameter: "/ file-upload"? Thank you! – Splendent

Answer 2

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

Quod