I am currently implementing a tutorial from the documentation provided by Dropzone.js. However, I seem to be encountering an issue as the example is not working correctly. Here is the structure that I currently have:
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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c180e130c061312193c4a524c524c511e19081d524d">[email protected]</a>/dist/dropzone-min.js"></script>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89c8a97888297969db8ced6c8d6c8d59a9d8c99d6c9">[email protected]</a>/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 where the previews should be displayed -->
<!-- Now set up 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 that I am seeing: https://i.sstatic.net/bZIYs.png
Upon checking the debug console, I am unable to locate any errors. Can anyone provide insight on what might be missing or what mistake I could potentially be making?