FileWriter API: use blob to write data

Question

i have a blob url like blob:blahblah that points to a file. I want to write the file behind this blob to local filesystem. The writer.write() documentation says it accepts a file object (from input-type-file) and a blob. But it throws a type mismatch error when try this

fileEntry.createWriter(function(writer) {
    writer.write(blob); //blob is a var with the value set to the blob url

i know the problem is that the blob does not get accepted but i would like to know how can i store a blob to the filesystem. i created the said blob earlier in the script from input-type-file and stored it's value in a var.

EDIT

Ok so i think i should have given more code in the first place.

first i create a blob url and store it in a var like this

files[i]['blob'] = window.webkitURL.createObjectURL(files[i]);

files is from an input-type-file html tag and i is looped for number of files. you know the gig.

then the variable goes through a number of mediums, first through chrome's message passing api to another page and then from that page to a worker via postMessage and then finally back to the parent page via postMessage again.

on the final page i intend to use it to store the blob's file to local file system via file system api like this..

//loop code
fileSystem.root.getFile(files[i]['name'], {create: true}, function(fileEntry) {
    fileEntry.createWriter(function(writer) {
        writer.write(files[i]['blob']);
    });
});
//loop code

but the writer.write throws Uncaught Error: TYPE_MISMATCH_ERR: DOM File Exception 11

i believe this error is because the variable supplied to writer.write is a text and not a blob object from something like createObjectUrl (directly and not after passing through multiple pages/scopes) or not a window.WebKitBlobBuilder. So how can a blob's url be used to store a file?

file api only works in chrome. version is stable and error does not matter because it is a valid error, i am looking for a way to do it correctly. anyways.. TYPE_MISMATCH_ERR — Achshar
– Achshar, Commented Oct 3, 2011 at 14:02
I don't see such error in the spec, - so either ther spec is outdated, or you are doing something wrong, or there is a bug in chrome. dev.w3.org/2009/dap/file-system/file-writer.html — c69
– c69, Commented Oct 3, 2011 at 14:45
I've had success saving blobs to the FS. How are you creating the blob? This example works for me: html5rocks.com/en/tutorials/file/xhr2/#toc-example-savingimages — ebidel
– ebidel, Commented Oct 3, 2011 at 14:50
@ebidel i use createObjectURL to create blobs. the blobs work when i paste the url in the url bar. and in that example, the blob is created on the fly.. i have a variable whose value is blob url. i think those are two different cases. an array buffer is appended to a blank blob in that example, i use createObjectURL to create blobs from input files and store them in a variable for later use. the variable is just text and not a blob object. its a text of blob's url. — Achshar
– Achshar, Commented Oct 3, 2011 at 17:07

ebidel · Accepted Answer · 2011-10-11 16:42:55Z

1

From your edited code snippet and description, it sounds like you're writing the blobURL to the filesystem rather than the File itself (e.g. files[i]['name'] is a URL). Instead, pass around the File object between main page -> other page -> worker -> main page. As of recent (in Chrome at least), your round trip is now possible. File objects can be passed to window.postMessage(), whereas before, the browser serialized the argument into a string.

You 'fashion' a handler/reference to a Blob with createObjectURL(). There's not really a way to go from blobURL back to a Blob. So in short, no need to create createObjectURL(). Just pass around files[i] directly.

answered Oct 11, 2011 at 16:42

ebidel

24.2k4 gold badges65 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Achshar Over a year ago

but these are for workers only.. right? (i.e. will file objects go through chrome's message passing api? [they didn't go that last time i checked but it was a couple weeks ago and maybe there is some change in latest nightly builds]) my file object first go from index page to background page and then to the worker.. it made sense to implement worker in background page but i can move it to index if there is no other way.. :O

ebidel Over a year ago

Yep, you can pass File objects to Workers now.

Achshar Over a year ago

hmm you seem to have misunderstood :( i know we can do it now, what i am asking is can i send them from index page to background page with chrome's message passing api? coz file objects are created on index page but worker is on background page :)

Collectives™ on Stack Overflow

FileWriter API: use blob to write data

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related