Fredrik A. Fredrik A. - 22 days ago 6
Javascript Question

Dropzone.js Drag & Drop does not work in IE10

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?

Answer

It turns out that drag and drop does not work when I access the page in debug mode from Visual Studio. If I access the page from a newly opened browser it works just fine.

According to the thread http://social.msdn.microsoft.com/Forums/silverlight/en-US/383198a9-dbb4-4f94-8713-484e5bacb14b/dragdrop-not-active-during-debugging?forum=silverlightdevtools this can happen if Visual Studio and IE is executed with different accounts/priviligies. In my case Visual Studio is running as Administrator.

Since I do not need to debug the client scripts on this page I will just open the site in a fresh IE when I test the page.