IE11 on Drop file Transfer undefined or null reference

Question

I have a drag and drop function to handle both web and local file uploading. The local file drag n' drop works fine in chrome and firefox but IE give me the following error 'Unable to get property of '0' of undefined or null reference'. Below is my JS for the drop action. IE is pointing at the beginning of my if statement as the cause of the issue. Am I missing an API of some kind or is there something I have to declare for IE to work?

$("#blightImgBack").on('drop', function(e) {
debugger;
console.log('on drop');
if (e.originalEvent.dataTransfer.items[0].kind === 'file') {
    console.log('local file');
    imageLoaderBack = document.getElementById('blightImgBack');
    imageLoaderBack.addEventListener('change', handleBackImage);
    function handleBackImage(e) {
        console.log('function fired');
        e.preventDefault();
        var reader = new FileReader();
        reader.onload = function (event) {
            console.log('updating src');
            $('#backImgUploader img').fadeOut(200, function() {
                $('#backImgUploader img').attr('src',event.target.result);
                $('#backImgUploader img').fadeIn(300);
            });
        };
        reader.readAsDataURL(e.target.files[0]);
    }
} else if (e.originalEvent.dataTransfer.items[0].kind === 'string') {
    e.preventDefault();
    e.originalEvent.dataTransfer.items[0].getAsString(function (url) {
        $('#backImgUploader img').fadeOut(200, function() {
            $('#backImgUploader img').attr('src', url);
            $('#backImgUploader img').fadeIn(300);
        });
    });
}
});

score 1 · Accepted Answer · answered Feb 27 '17 at 16:41

1

According to the table below, HTML5 drag'n'drop support in IE is sketchy, even on Edge. I couldn't find the relevant information about specific browser support on MSDN, but my guess would be that items doesn't even exist on IE 11 (I think it expects only one item, read the github page below):

http://caniuse.com/#feat=dragndrop

https://github.com/elsix/angular-jointjs-graph-demo/issues/5

answered Feb 27 '17 at 16:41

AsGoodAsItGets

2,886
34
49

After more research thats what its looking like sadly. My solution was to change the UI text based on browser type. That way users using IE have proper guidance as to how to upload an image. – Tyharo Feb 27 '17 at 18:35

Brian Andersen · Answer 2 · 2017-02-27T16:34:34.927

-1

I made a CodePen: https://codepen.io/Brianmanden/pen/NpqBwZ

I added a few lines to get it going:

$("#blightImgBack").on("dragover", false);

.. and

$("#blightImgBack").on('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();
  ...
}

I found the information I needed over here: enter link description here

Keep us posted on your progress mate :)

edited Feb 27 '17 at 16:34

answered Feb 27 '17 at 16:15

Brian Andersen

76
1
6

IE11 on Drop file Transfer undefined or null reference

2 Answers2