html 5 + webkitRequestFileSystem: save image file from user

Question

using webkitRequestFileSystem, I want to do something very simple: get a file from user, save it to browser local filesystem, and use it later (for example as image src etc)

I read about webkitRequestFileSystem but I didn't find anything about cloning files from user (maybe I missed it?).

so I tried a naive implementation of reading, getting file, writing, and everything seems to works (calls the success callback), and I can see the file with a chrome extension (HTML5 filesystem explorer), but when I try to use the image url it shows a broken image icon.

here's the snippet to clone the file (sort-of, had to clean it up a little):

var src_file = .... <-- got it from user

filesystem.root.getFile("output.png", {create: true}, function(dest_file)
{
            var reader = new FileReader();

            reader.onerror = function() {alert("ERROR")};
            reader.onload = function(e)
            {
                read_buffer = e.target;
                dest_file.createWriter(function(fileWriter) {

                    var blob = new Blob([read_buffer.result], {type: 'application/octet-stream'});  // <-- also tried "image/png" etc..
                    fileWriter.onerror = function() {alert("ERROR2")};
                    fileWriter.onwriteend = function(writer)
                    {
                        alert("SUCCESS!");
                    };
                    fileWriter.write(blob);

                },  function() {alert("ERROR3")});

            };

            reader.readAsBinaryString(src_file);
});

PS I work on localhost, is that an issue?

Thanks!

Answer 1

answering myself: should have used readAsArrayBuffer() instead of readAsBinaryString()... what a waste of time that was :/