On drop anywhere on body start upload - dropzone.js

Question

I currently have a dropzone js area like so
<form method="post"
class="dropzone bg-black"
enctype="multipart/form-data"
action="/">
<br>
<div class="normal-form">
<div class="btn d-inline-block btn-previous">
<input class="btn"
id="files"
type="file"
name="image"
multiple="multiple">
</div>
<button class="btn"
style="font-size: 20px;"
type="submit">Upload
</button>
</div>
</form>
And my dropzone js configuration looks like so
<script defer>
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".dropzone", {
autoProcessQueue: false
});
myDropzone.on('drop', function (e) {
document.querySelector('#files').files = e.dataTransfer.files;
});
$('form').on('drop', function () {
$('form').submit();
});
$('form').on('submit', function () {
$('form').addClass('hidden');
$('.loader').removeClass('hidden');
});
</script>
As it works, when some one drops a file or files, it hides, shows a upload gif while it uploads the files till uploaded then redirects.
This works fine. The only issue I'm confused about is how do I make it so if they drop anywhere on the body instead of just the dropzone class, to have that work?
I tried doing
var myDropzone = new Dropzone(document.body, {
autoProcessQueue: false
});
but I get
Uncaught Error: No URL provided.
Any help would be appreciated.

Answer 1

Got it, I had to put in the Dropzone config the url action
var myDropzone = new Dropzone(document.body, {
url: "/",
autoProcessQueue: false,
createImageThumbnails: false,
});