Dropzone js error "Uncaught TypeError: $(...).dropzone is not a function"

Question

I have been having trouble trying to add dropzone with other input fields on the same form but finally i have managed to accomplish it. The problem I have currently is that the dropzone field is not reponsive on click or drag and get this error "Uncaught TypeError: $(...).dropzone is not a function" in my console. Below is my code:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>


    {!! Form::open([ 'action'=>'MainController@uploadCar', 'files' => true, 'enctype' => 'multipart/form-data']) !!}

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

     <div class="col-md-6">
     <label class="required">Location</label>
     <input type="text" class="full-col" name="location">
     </div>

     {!! Form::close() !!}

     <script type="text/javascript">

     Dropzone.autoDiscover = false;
     jQuery(document).ready(function() {

      $("div#my-awesome-dropzone").dropzone({
        url: "/uploadcar"
      });

     });


     </script>

Assistance will be greatly appreciated

Answer 1

A little late for the party... hope help someone. From Dropzone.js... try to use:

// Dropzone class:
var myDropzone = new Dropzone("div#my-awesome-dropzone", { url: "/uploadcar"});

instead of:

$("div#my-awesome-dropzone").dropzone({
    url: "/uploadcar"
});

I had the same problem (in a different scenario) and it worked for me