IE10 does not appear to like the drop event when dropping a file

html, internet-explorer-10

Solution

You will want to also listen to the `dragenter` and `dragover` events and prevent their default behavior. You'll also want to prevent default behavior in the `drop` event handler as well.

For example you may want to do something like this...

var $dropArea = $( "#drop-area" );

$dropArea.on({
    "drop" : makeDrop,
    "dragenter": ignoreDrag,
    "dragover": ignoreDrag 
});

function ignoreDrag( e ) {
    e.preventDefault();
}

function makeDrop( e ) {
    var fileList = e.originalEvent.dataTransfer.files,
        fileReader;

    e.preventDefault();
    if ( fileList && fileList.length > 0 ) {
        fileReader = new FileReader();
        fileReader.onloadend = handleReaderOnLoadEnd( $( "<img />" ) );
        fileReader.readAsDataURL( fileList[ 0 ] );
    }
}

function handleReaderOnLoadEnd( $image ) {
    return function( event ) {
        $image.attr( "src", this.result )
            .addClass( "small" ) 
            .appendTo( "#drop-area" );
    };
}

You can find a working example at this JSFiddle http://jsfiddle.net/qsyNW/

Note: You don't have to use jQuery with this like I did. However, if you do use jQuery then you'll need to reference `e.originalEvent` inside the `drop` event handler in order to get at the `dataTransfer.files`.

Problem

I have a simple web app that uses the filereader api in HTML5 to accept file uploads through drag and drop. Upon dragging a file onto the webpage, the correct drag event will fire, but when I drop the file IE simply opens it rather than letting the JS handle it. The drop code is very basic: ``` this.addEventListener("drop", function(event) { event.stopPropagation(); event.preventDefault(); Self.drop(event); //this event is not hit. IE just opens the file! }, false); ``` Is this a specific limitation of IE10 or could I be doing something wrong? Thanks

Original source