How to detect ignored large file on input file using Safari mobile

Question

Safari mobile <input type="file">ignore large files that are transferred (currently being tested with a 10 megabyte image file ).

When he does this, the input does not raise any events (no change, no error, nothing). It simply ignores the user action.

Is there a way to detect when this will happen to notify our user?

Test case here: http://jsbin.com/hugeja/8/edit

---

Change . Since it really looks like Safari, but I opened the number # 16862230 in the Safari tracker (I would have left a link, but not there ... oh, Apple ...) Please comment on this problem if you can reproduce!

Answer 1

I found an article on iFadey about calculating the size of a downloaded file: http://www.ifadey.com/2012/05/get-file-size-from-input-control/

This is JavaScript:

document.addEventListener( 'DOMContentLoaded', function() {
    var inputImg = document.getElementById( 'inputImg' );

    inputImg.addEventListener( 'change', function( e ) {
        var fileSize = getFileSize( inputImg );

        if( fileSize > -1 ) {
            document.getElementById( 'fileSize' ).innerHTML = ( fileSize / 1024 ).toFixed( 2 ) + ' KB';
}
        else
            document.getElementById( 'fileSize' ).innerHTML = 'Failed to get file size';
    }, false );
}, false );

function getFileSize( inputFile ) {
    var files = inputFile.files;

    if( !files ) {
        //for IE
        try {
            var fs = new ActiveXObject( 'Scripting.FileSystemObject' );
            var file = fs.getFile( inputFile.value );
            return file.size;
        } catch( ex ) {
            return -1;
        }

    } else if( files.length > 0 ) {
        //for rest of the world
        return files[ 0 ].size;
    }
}

Of course, you only need a piece of files.length > 0code, as you are targeting Safari (not IE), but I posted all the code anyway. By adding this script, I was able to download 13 MB of video on my iPhone Safari. It was automatically compressed, but the script still returned the actual file size.

Take a look here: http://jsbin.com/kubodoqe/3/edit

Try it and let me know if this works.

EDIT: 10 , :

    if(fileSize > 10485760) {
alert("Your file is too large to be uploaded");
inputImg.value = "";
document.getElementById( 'fileSize' ).innerHTML = "";
}

JS Bin: http://jsbin.com/kubodoqe/5/edit