I am having trouble integrating DROPZONE with form text on a system, using laravel 5.7.
I read the documentation but could not implement it. reference: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
I read some tutorials like: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone https://jsfiddle.net/gued9y6m/ ... but none of them met my criteria
js file
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
});
}
}
in form (blade.php)
<form id="my-awesome-dropzone" class="dropzone">
<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>
What I would like: The user must fill in all the form fields, add the photos and when I click "send all", an ajax request sends all the fields (including the photos) to a method in my controller, where it will be stored in the DB.
