I have followed the tutorial Combine normal form with Dropzone (https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone) and the resulting page works perfectly in the latest version of Google Chrome.
But, when I test the same page in IE10 drag and drop does not work. The drop zone is clickable and I can upload the files to the server, thus the dropzone is initialized correctly. It is just the drag and drop feature that does not work.
When I try the demo on http://www.dropzonejs.com/ drag and drop works in IE10.
I have checked the IE internet options and everything is enabled and I also added the localhost to trusted sites.
This is my code:
<script src="~/Scripts/dropzone.js"></script>
<script type="text/javascript">
Dropzone.options.dropzoneForm = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
addRemoveLinks: true,
createImageThumbnails: false,
// 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();
});
}
};
</script>
<form action="~/FileUpload/SaveUploadedFiles" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
<div class="dropzone-previews"></div>
<button type="submit">Submit data and files!</button>
</form>
Of course, the stylesheet is also added to the page.
Have I missed some configuration or is this an issue with the browser?