FileReader, crash in Chrome

Question

I am trying to implement a file upload with dnd and FileReader for image preview. It works quite good and also if i upload multiple files at ones. But when i upload a second time images > ~1,6MB it crashes in chrome (firefox runs fine). probably a bug in chrome but maybe anyone knows how to solve this? Here an example: http://jsfiddle.net/PTssx/7/

Answer 1

Instead of MBs large Data URIs, you could also make use of requestFileSystem, to virtually store a copy of the file on the client's computer (in a location directly accessible by JavaScript). You then only have a file path which references to the actual contents (so this isn't a path to the original location; it starts with filesystem:).

Then again this is not supported by all browsers, but since you're already using FileReader I don't think this is much of an issue.

I altered a previous answer of mine to make it fit in your code: http://jsfiddle.net/PTssx/10/.

var img = document.createElement('img');

window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) {
    fs.root.getFile('test.png', {create: true}, function(fileEntry) { // create file
        fileEntry.createWriter(function(fileWriter) {
            var builder = new BlobBuilder();
            builder.append(reader.result); // set file contents
            var blob = builder.getBlob();

            fileWriter.onwriteend = function() {
                img.src = fileEntry.toURL(); // set img src to the file
            };

            fileWriter.write(blob);
        }, function() {});
    }, function() {});
}, function() {});

$('#items').append(img);

You then have to read the file as an ArrayBuffer instead of a Data URI:

reader.readAsArrayBuffer(f);

reader.result will then be an ArrayBuffer.

Note: For now, in Chrome this technology has been implemented as webkitRequestfileSystem and WebKitBlobBuilder.

Answer 2

I would avoid FileReader and FileSystem if i where you. You can preview the image with just img.src = URL.createObjectURL(File)