laravellaravel-8dropzone.jsdropzone

TypeError: Dropzone is not a constructor


I've installed Dropzone.js using Composer on my Laravel 8 project with the Metronic template.

For some reason it doesn't work.

The web developer tools console is stating that 'dropzone is not a constructor'

Here is the JS

const id = "#dropzones";
const dropzone = document.querySelector(id);

var myDropzone = new Dropzone(id, {

    url: "https://localhost.com/scripts/void.php",
    parallelUploads: 1,
    maxFilesize: 30, 
    autoProcessQueue: false,
    // previewsContainer: id + " .dropzone-items", // Define the container to display the previews
    clickable: id + " .dropzone-select", // Define the element that should be used as click trigger to select files.
});

...and here is the html code

<div class="form-group row">
  <div class="col-md-12" id="dropzones">
      <a class="dropzone-select btn btn-light-primary font-weight-bold btn-sm float-right" id="upload_file" type="file" >Attach File</a>
  </div>
</div>

and for some reason it work when i use the stand alone script on the top

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<script src="{{ "other script") }}"></script>

Is there any way to use it using Composer installation not the stand alone script?


Solution

  • Another alternative way for initialising dropzone is

    $("#dropzones").dropzone({
        url: "https://localhost.com/scripts/void.php",
        parallelUploads: 1,
        maxFilesize: 30, 
        autoProcessQueue: false,
       // previewsContainer: id + " .dropzone-items", // Define the container to display the previews
       clickable: id + " .dropzone-select", // Define the element that should be used as click trigger to select files.
     });
    

    Try this way also