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 e

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.