IE - how to drag and drop a file onto the <input type = "file" / "> element

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

Using this, I can drag a file (or several) from Windows Explorer and drop it into an item <input type="file"/>

. The goal is to provide the user with a pleasant alternative to clicking the Browse button on an item <input type="file"/>

and manually selecting a file).

A file crash is handled as follows:

Html

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

      

        
        
        
      

    

Javascript (I just allow input type = "file" action by default - no propagation)

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

      

        
        
        
      

    

This works for Chrome, Firefox, Safari and Opera, but not Internet Explorer! (as in version 11)

In IE, when I drop a file on my element <input type="file"/>

, the entire page is overwritten and the content of the file I dropped is displayed. To illustrate the behavior, one can check http://jsfiddle.net/andreymir/H3RR7/light/ in Internet Explorer versus other browsers.

Does anyone know how to delete a file to an element <input type="file"/>

in Internet Explorer using HTML and Javascript?