IE - how to drag and drop file onto an element

Question

I have created a very simple file drag and drop mechanism using javascript.

Using this, I can drag a file (or multiple) from Windows Explorer and drop it onto an <input type="file"/> element. The aim is to provide the user with a nice alternative to clicking the "Browse" button on the <input type="file"/> element and selecting a file manually).

The "file drop" is handled as follows:

HTML

<input type="file" ondrop="ondropfile(event);"/>

Javascript (I simply allow the input type="file" default action to occur - without propagation)

ondropfile = function(e) {
  e.stopPropagation();
  return false;
};

The above works for Chrome, Firefox, Safari and Opera, BUT NOT Internet Explorer! (as at version 11)

In IE, when I drop a file onto my <input type="file"/> element the entire page is overwritten and the contents of the file I have dropped are displayed. To illustrate the behaviour one can test http://jsfiddle.net/andreymir/H3RR7/light/ in Internet Explorer as compared to other browsers.

Does anyone know how to drop a file onto an <input type="file"/> element in Internet Explorer using HTML and Javascript?

I don't believe there is a way. But, since your other current thread discusses AJAX, it's probably ok here to mention that there is an approach using XHR you could substitute. To start, you made a small oversight. The input needs an ondragover or ondragenter event.preventDefault(). That will stop the page from grabbing the dropped file away. Then in the input's ondrop, you'll want to capture the event.dataTransfer.files, and append it to a [FormData](http://www.w3.org/TR/XMLHttpRequest/#interface-formdata), which you can ship via xhr.send(). — user4749485, May 03 '15 at 21:42

IE - how to drag and drop file onto an element

0 Answers0