I can't get FileReader to work in iOS 8. The following demo illustrates this (jsFiddle link for iOS - /):

var file = document.getElementById('file-input');
file.addEventListener('change', function(event) {
    var file = this.files[0];
    
    if(!file) {
        alert('No file');
        return;
    }
    
    var reader = new FileReader();
    var timeout = setTimeout(function() {
         alert('FileReader not functioning');   
    }, 500);
    reader.onload = function(event) {
        clearTimeout(timeout);
        alert('Base64 length - ' + event.target.result.length);
    };    
    
    reader.readAsDataURL(file);
});

<form>
    <input id="file-input" type="file" />
</form>

I can't get FileReader to work in iOS 8. The following demo illustrates this (jsFiddle link for iOS - http://jsfiddle/gys6rubg/1/):

var file = document.getElementById('file-input');
file.addEventListener('change', function(event) {
    var file = this.files[0];
    
    if(!file) {
        alert('No file');
        return;
    }
    
    var reader = new FileReader();
    var timeout = setTimeout(function() {
         alert('FileReader not functioning');   
    }, 500);
    reader.onload = function(event) {
        clearTimeout(timeout);
        alert('Base64 length - ' + event.target.result.length);
    };    
    
    reader.readAsDataURL(file);
});

<form>
    <input id="file-input" type="file" />
</form>

This console.log's the length of the Base64 string in most browsers, but on iOS 8 Safari it console.log's 'FileReader not functioning'.

Is there any way around this, or anything I'm doing wrong?

• javascript
• html
• ios
• mobile-safari
• ios8

• Whoops, I accidentally edited the post while not logged in. – jkjustjoshing Commented Sep 23, 2014 at 16:48

2 Answers 2

I am having the same problem with Safari on iPhone (but the problem is not present on Chrome for iPhone!).

If you add the error event handler:

reader.onerror = function (e) {
    alert("error " + e.target.error.code + " \n\niPhone iOS8 Permissions Error.");
}

you will get error code 4. According to HTMLGoodies - Responding to HTML5 FileReader Events

Error Code 4 = NOT_READABLE_ERR: The file could not be read because of a change to permissions since the file was acquired - likely because the file was locked by another program.

it's a bug

should be fixed in the next release