HTML5 file system API: loading an isolated file?

Question

I have some data in indexeddb files, and I would like to allow my users to load this data for import into other applications. I can use Blobs to make this easy:

var blob = new Blob(['herp!'], {type: 'application/octet-stream'}); var iframe = document.createElement("iframe"); iframe.id = "myiframe"; iframe.style.display = "none"; iframe.src = window.webkitURL.createObjectURL(blob); // needs a revokeObjectURL $('#dlplaceholder').append(iframe); 

The correct type parameter for Blob is the key: if I set it to text / plain, it will not load the file. If I have an iframe height and width and the display type of the block, I can see the data in the iframe.

However, I want to create one file from several values ​​from my database, and each of these values ​​can be large, and I can have many records. I can concatenate these values ​​in the Blob constructor, but I'm worried that there is so much data in memory that I explode.

So, I decided to create a file in an isolated system and add each value to it and use the file instead of blob as the createObjectURL argument. But when I do this, it does not load; it behaves exactly the same as if I used my Blob code with type text / plain. Here is the code:

 var fname = 'mybadtest'; //UPDATE here the problem: needs .bin file extension var init_fs = function ( fs ) { // first, write to the sandboxed file fs.root.getFile(fname, {create: true, exclusive: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { // write to file completed. now use the file for download fs.root.getFile(fname, {}, function(fileEntry) { fileEntry.file(function(file) { var iframe = document.createElement("iframe"); iframe.id = "myiframe"; iframe.style.display = "none"; iframe.src = window.webkitURL.createObjectURL(file) // needs revokeObjURL $('#dlplaceholder').append(iframe); }, errorHandler); }, errorHandler); }; var blob = new Blob(['derp!'], {type: 'application/octet-stream'}); fileWriter.write(blob); }, errorHandler); }, errorHandler); }; window.webkitStorageInfo.requestQuota(PERSISTENT, mysz, function(grantedBytes) { window.webkitRequestFileSystem(PERSISTENT, grantedBytes, init_fs, errorHandler); }, err_function ); 

If I give the iframe size and set the display to lock, I can see the data that I wrote to the file. Therefore, I know that I wrote the file correctly.

Any ideas on how I can give the file the correct type so that I can upload it? I went through MDN documents, HTML5 Rocks tuts, and Eric Bidelman's Using the File System APIs, but I don’t see anything that would address this situation. I am using Chrome version 27.0.1453.110.

UPDATE: problem resolved; see comment below.

UPDATED UPDATE: see Rob W's helpful comment on an alternative approach below.