Dropzone is not displayed inside the form

Question

I am trying to create a form with an input and image / file downloader so that it loads as soon as I press the submit button.

But my dropzone (previewsContainer) does not display itself when I put it on the form.

HTML

<form action="#" class="giga-form" id="my-awesome-dropzone"> <div class="col-md-5"> <h5>nimetus</h5> <input class="form-control" type="text" required> <h5>tüüp</h5> <select class="form-control" required> @foreach($types as $type) <option value="{{$type->id}}">{{$type->name}}</option> @endforeach </select> <h5>aadress</h5> <input class="form-control" type="text"> <h5>tellija</h5> <input class="form-control" type="text"> <h5>info</h5> <textarea class="form-control" rows="3"></textarea> </div> <div class="col-md-6 col-md-offset-1 top-pad"> <div class="ico-border"><i class="icon-unlock"></i></div> avalik. <a href="#"><b>Varja</b></a> <h5 class="top-br">pildid ja failid</h5> <div class="giga-table fixed thumbnails dropzone"> <div class="dropzone-previews"></div> </div> </div> <button type="submit">Continue</button> </form> 

SCRIPT

 {{ HTML::script("js/jquery-1.9.1.js") }} {{ HTML::script("js/jquery-ui-1.9.2.custom.min.js") }} {{ HTML::style('css/basic.css');}} {{ HTML::style('css/dropzone.css');}} {{ HTML::script('js/dropzone.js') }} <script> Dropzone.autoDiscover = false; // if this is true I get "URL not defined" in console. $(document).ready(function(){ Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element // The configuration we've talked about above url: '#', previewsContainer: ".dropzone-previews", autoProcessQueue: false, uploadMultiple: true, parallelUploads: 100, maxFiles: 100, // The setting up of the dropzone init: function() { var myDropzone = this; console.log(myDropzone); // This doesn't get logged when I check. <------- // First change the button to actually tell Dropzone to process the queue. this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { // Make sure that the form isn't actually being sent. e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); // Listen to the sendingmultiple event. In this case, it the sendingmultiple event instead // of the sending event because uploadMultiple is set to true. this.on("sendingmultiple", function() { // Gets triggered when the form is actually being sent. // Hide the success button or the complete form. }); this.on("successmultiple", function(files, response) { // Gets triggered when the files have successfully been sent. // Redirect user or notify of success. }); this.on("errormultiple", function(files, response) { // Gets triggered when there was an error sending the files. // Maybe show form again, and notify user of error }); } } }); </script> 

Answer 1

Dropzone.js seems to only detect the camel version of the id div when it is inside the dropzone class.

Fix

HTML

 <div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div> 

Note that I have a dropzone class and id my-awesome-dropzone.

Js

 $(document).ready(function(){ Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element // The configuration we've talked about above url: '#', previewsContainer: ".dropzone-previews", uploadMultiple: true, parallelUploads: 100, maxFiles: 100 } }); 

Now it works. The code in my question needs to be redone a bit, but I decided to use a different approach that would also work, so I cut the code.