Integrating Dropzone.js into html form with other form fields
I would like to add dropzonejs to a form with other elements. I found this sample and followed the instructions, unfortunately all of them become dropzonejs zone: https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone
Here is my code:
<form action="/Post/Edit" class="dropzone" enctype="multipart/form-data" method="post">
<div class="form-group">
<label for="PostAddress_AddressLineOne">Address Line One</label>
<input class="form-control" id="PostAddress_AddressLineOne" name="PostAddress.AddressLineOne" type="text" value="" />
</div>
<div class="dropzone-previews"></div>
<div class="fallback">
<!-- this is the fallback if JS isn't working -->
<input name="file" type="file" multiple />
</div>
<script type="text/javascript">
Dropzone.options.dropzoneJsForm = {
//prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 25,
maxFiles: 25,
addRemoveLinks: true,
previewsContainer: ".dropzone-previews",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// Here the change from enyo tutorial...
$("#submit-all").click(function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
}
};
</script>
I also followed the follow-up post and the integer from is still a dropzone : Integrating dropzone.js into an existing html form with other fields
Should I have a from in the form?
thank
source to share
Your form class is "dropzone", so the form becomes a dropzone.
Only use the "dropzone" class on the actual item you want to turn into a dropzone. For example, try changing "dropzone-previews" to "dropzone".
Or if you want to create a software package programmatically, use:
Dropzone.autoDiscover = false;
This will disable automatic conversion of items with the "dropzone" class.
source to share