Dropzone not displaying itself inside form

Question

I'm trying to have a form with inputs and an image/file uploader so it gets all uploaded once I press submit button.

But my dropzone (previewsContainer) is not displaying itself when I put it inside a 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's 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

Seems like dropzone.js detects the camelized version of the div id only when it's inside the class dropzone.

Fix

HTML

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

Notice that I've class dropzone 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
  }

});

This now works. The code in my question needs to be redone a little bit, but I've decided to take another approach that would work too so I've shortened the code.