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>