javascriptdropzone.jsdropzone

Dropzone js documentation example not working

I am following an example from the documentation of Dropzone.js. The example does not seem to work. This is what I have as a structure:

Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element

  // The configuration we've talked about above
  autoProcessQueue: false,
  uploadMultiple: true,
  parallelUploads: 100,
  maxFiles: 100,

  // The setting up of the dropzone
  init: function() {
    var myDropzone = this;

    // 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
    });
  }

}
<head>
  <meta charset="UTF-8">
  <title>Dropzone JS tutorial</title>
  <script src="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone-min.js"></script>
  <link href="https://unpkg.com/dropzone@6.0.0-beta.1/dist/dropzone.css" rel="stylesheet" type="text/css" />

</head>

<body>
  <form id="my-awesome-dropzone" class="dropzone" action="#">
    <div class="dropzone-previews"></div>
    <!-- this is were the previews should be shown. -->

    <!-- Now setup your input fields -->
    <input type="email" name="username" />
    <input type="password" name="password" />

    <button type="submit">Submit data and files!</button>
  </form>
<script src="dropzone-custom.js"></script>
</body>

This is the output I am getting: enter image description here

When I look in the debug console, I can't find any errors. Can someone tell me what I am missing or what I am doing wrong?

Solution

  • you must use

    Dropzone.discover();

    befor your configuration because in version 6 auto Discover has been removed so you can have:

      Dropzone.discover();
Dropzone.options.myAwesomeDropzone = { 

}