title: html 5 + webkitRequestFileSystem: save image file from user
body: <p>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)</p>
  
  <p>I read about webkitRequestFileSystem but I didn't find anything about cloning files from user (maybe I missed it?). </p>
  
  <p>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.</p>
  
  <p>here's the snippet to clone the file (sort-of, had to clean it up a little):</p>
  
  <pre><code>var src_file = .... &lt;-- 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'});  // &lt;-- 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);
  });
  </code></pre>
  
  <p>PS I work on localhost, is that an issue?</p>
  
  <p>Thanks!</p>