Why revokeObjectURL doesnt show me the filesize on IE 11

Question

var fileInput   = document.querySelector('#file');
var preview     = document.getElementById('preview');

fileInput.addEventListener('change', function(e) {
var var_error = 0;

$('.contest_upload_preview').show();
$('.contest_upload_error').hide();

preview.onload = function() {
    var pic_width   = this.naturalWidth; 
    var pic_height  = this.naturalHeight;
    var pic_size    = $('#file')[0].files[0].size;

 //   alert("FS: "+pic_size);

    if(pic_size > 15728640) {
        //larger than 15MB (15728640). 
        var_error = 1;
        var_upload_pic = 1;
        preview.setAttribute('src', '');
    } else {
        //Dimension-check       
        if(pic_width < 720) {
            var_error = 1;
            var_upload_pic = 1;
            preview.setAttribute('src', '');
        }
        if(pic_height < 720) {
            var_error = 1;
            var_upload_pic = 1;
            preview.setAttribute('src', '');
        }
    }

    window.URL.revokeObjectURL(this.src);
};

if(var_error == 0) {
    console.log("geladen");
    var url = URL.createObjectURL(e.target.files[0]);
    preview.setAttribute('src', url);
    var_upload_pic = 0;
    }

}, false);

This script is working fine except in IE 11. i get this error: DOM7001: Ungültiges Argument “url”. Fehler beim Sperren der folgenden Blob-URL

If i google "window.URL.revokeObjectURL IE11" it should work, any idea why not?

Thanks

Answer 1

Internet Explorer does not provide a standard way to verify a file's size before upload.

See here for more information about the file api.

You can still figure out the file size, but it's cumbersome as you'll to alter the user's browser so that it enables activex on your page. Here is the relevant code.

function getSize()
{
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}

Answer 2

You may want to simply guard against an empty this.src, since you're setting it within the function (via setAttribute):

if(this.src) window.URL.revokeObjectUrl(this.src);