Dropzone.js Drag & Drop does not work in IE10

Question

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 1

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.

Answer 2

You have to and in bundleconfig these lines of code

        // dropZone styles
        bundles.Add(new StyleBundle("~/Scripts/dropZone").Include(
                  "~/Scripts/dropzone/css/basic.css",
                  "~/Scripts/dropzone/css/dropzone.css"));

        // dropZone 
        bundles.Add(new ScriptBundle("~/Scripts/dropzone").Include(
                  "~/Scripts/dropzone/dropzone.js"));

be carefull of the script paths to match yours in your solution Very Important: (SOS) - The css must be first and then the js files as in example.

Answer 3

Check your head section to see if you are forcing compatibility with an older version of IE. A developer set ours to IE=9 and caused 500 Internal Server Errors every time a file was uploaded in IE11.