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

Question

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

Answer 1

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.