Eli Grey

Saving generated files on the client-side

Have you ever wanted to add a Save as… button to a webapp? Whether you’re making an advanced WebGL-powered CAD webapp and want to save 3D object files or you just want to save plain text files in a simple Markdown text editor, saving files in the browser has always been a tricky business. Usually when you want to save a file generated with JavaScript, you have to send the data to your server and then return the data right back with a Content-disposition: attachment header. This is less than ideal for webapps that need to work offline. The W3C File API includes a FileSaver interface, which makes saving generated data as easy as saveAs(data, filename), though unfortunately it will eventually be removed from the spec. I have written a JavaScript library called FileSaver.js, which implements FileSaver in all modern browsers. Now that it’s possible to generate any type of file you want right in the browser, document editors can have an instant save button that doesn’t rely on an online connection. When paired with the standard HTML5 canvas.toBlob() method, FileSaver.js lets you save canvases instantly and give them filenames, which is very useful for HTML5 image editing webapps. For browsers that don’t yet support canvas.toBlob(), Devin Samarin and I wrote canvas-toBlob.js. Saving a canvas is as simple as running the following code:

canvas.toBlob(function(blob) {
    saveAs(blob, filename);
});

I have created a demo of FileSaver.js in action that demonstrates saving a canvas doodle, plain text, and rich text. Please note that saving with custom filenames is only supported in browsers that either natively support FileSaver or browsers like Google Chrome 14 dev and Google Chrome Canary, that support <a>.download or web filesystems via LocalFileSystem.

How to construct files for saving

First off, you want to instantiate a Blob. The Blob API isn’t supported in all current browsers, so I made Blob.js which implements it. The following example illustrates how to save an XHTML document with saveAs().

saveAs(
      new Blob(
          [(new XMLSerializer).serializeToString(document)]
        , {type: "application/xhtml+xml;charset=" + document.characterSet}
    )
    , "document.xhtml"
);

Not saving textual data? You can save multiple binary Blobs and ArrayBuffers to a Blob as well! The following is an example of setting generating some binary data and saving it.

var
      buffer = new ArrayBuffer(8) // allocates 8 bytes
    , data = new DataView(buffer)
;
// You can write uint8/16/32s and float32/64s to dataviews
data.setUint8 (0, 0x01);
data.setUint16(1, 0x2345);
data.setUint32(3, 0x6789ABCD);
data.setUint8 (7, 0xEF);
 
saveAs(new Blob([buffer], {type: "example/binary"}), "data.dat");
// The contents of data.dat are <01 23 45 67 89 AB CD EF>

If you’re generating large files, you can implement an abort button that aborts the FileSaver.

var filesaver = saveAs(blob, "video.webm");
abort_button.addEventListener("click", function() {
    filesaver.abort();
}, false);
  • http://about.me/andrewrabon Andrew

    Wow, this is all very useful. Thanks!

  • Eric Bidelman

    Love this! Just an FYI though, Chrome 13 no longer needs –unlimited-quota-for-files flags for the filesystem API to work. Also, –allow-file-access-from-files should only be used for testing as it allows access to file:// and is a security risk.

    • http://eligrey.com Eli Grey

      Thanks, I updated the post.

      • Eric Bidelman

        Whoa! Creepy fast sir. Creepy fast.

      • Boylen_josh

        can you please put mc back up I bought full verison but it wont work on my computer so I play this but now u shut down? please please please put back if u do i will luv u and I will share this around everywhere. So please put it back up and if u cant please reply why and how I can update videocard drivers thanks

      • Asere

        wow u reply to eric… and no else. can u plz put it back up or tell us why it doesnt work

      • Minecraftian

        Put minecraft back now! D=<

  • Eric Bidelman

    You may already know this, but a.download (http://developers.whatwg.org/links.html#downloading-resources) is now in Chrome Dev channel. It might be the better fallback to saving a named file than the FileSystem API. Although for the moment, both of these are only in Chrome :(

    • http://eligrey.com Eli Grey

      Wow, I didn’t know that! I’m going to look into adding that into FileSaver.js this instant. Also, I just experimented with it a bit and it looks like Chrome doesn’t follow the download property precisely when there isn’t a filename extension but a known media type is used (e.g. it saves foo.txt if the type is text/plain and the filename is only “foo”). I’d prefer if developers had more control over this. Other than that, this is perfect when combined with object URLs!

      • Troll

        execuseme why isnt minecraft working

      • Boylen_josh

        Please read my first comment and If u do put mc back up i will like eveything u have up so please read my comment and put mc back up;

      • THE WORLD

        Hey,
                      I dont know if you know this, but about a BILLION people play minecraft. I dont know how ur related to minecraft, but if you put it back up i might donate. PLEASE. PUT. MINECRAFT. BACK. UP!

      • Dylan Van Remmerden

        thanks

      • Jdsdog555666

        you fucking suck my shit!

      • Jdsdog555666

        you suck

      • TripleFlare33

        Can you please put Minecraft back? I cannot buy the game because of virud issues.

  • http://www.visual-experiments.com/ Henri

    Hi! Thanks a lot for both BlobBuilder and FileSaver! I’ve used them for my Google Chrome extension: 
    http://www.visual-experiments.com/2012/01/15/photosynth-webgl-viewer-with-html5-fileaver/

  • belltoy

    There is an error in Safari 5.1 for Mac:BlobBuilder.js:101
    RangeError: Maximum call stack size exceeded.

  • Pingback: Fájl mentés kliens oldalon | Farkas Máté

  • Thejbw

    Just wanted to say thanks! I’ve searched high and low all over the place for a *good* way to save images created by the user in a JS app. Everyone seems to simply rely on toDataUrl() which for a large canvas was unusably slow (tens of seconds to open the URL in a new window). Your method is fast and cross browser friendly.

  • Nathaniel Howe

    I’m am so p.o. Can you just leave try minecraft free alone. Ever since you exist I can’t play minecraft everything I had injoy is gone.thanks to you

  • Nathaniel Howe

    I have fast Internet but before I was able to play on this website called try minecraft for free but then every time I try to go on that website it said page not found. Can you please help. I don’t want to save files or anything I just want to go on that website and play minecraft. I work so hard on finding that website. Agian please help.

  • Kiaus

    Why isnt minecraft for free working?

  • Matt Shepherd

    Why did you get wriht of try minecraft free and Minecraft for free
    Man Minecraft was my favourite game of the world that’s all I capt playing every day

    Put minecraft back on please

  • trollerloller

    why did you put minecraft away leave it alone you fgot 

    • trollerloller

      if u aint gonnaa update it leave it alone

  • Sborrello

    why isnt it workini just want to play

  • Beckham Lim

    What the heck is this thing? Where is the minecraft for free??? If you are just going to just anyhow shut down that god damn website, i wont even play on this website

  • f@$k you

    i wana play minecraft!!!
     

  • XBRxGhosty

    Why im i not able to play minecraft any more it just takes me to this freakin blog!!!!!!!!!!!!!

  • Mastercod2134

    I……..WANNA play minecraft….give me minecraft back

  • Emilyawater64

    Please respond?
    As you can see, many,many people are complaining about the minecraft for free isn’t doing anything and going straight to here. As for me, I am quite upset as well. Do you think you could fix this problem? Thanks.

  • Sophie Star Bullen

    i want to play mine craft BITCH

  • Rodney98sullivan

    What the hell happened to try minecraft free this is bull!

  • Rodney98sullivan

    All my work :( 5 months……

    • Nh4713

      i know tell them to make it work again

  • Nh4713

    can you guys make minecraft work again please because i cant get the full version and this site is my only chance to play it

  • Nh4713

    i go with you rodney

  • Legocastledude

    okay seriously what the hell kinda sick joke is this? PUT EFFING TRY MINECRAFT FREE BACK ON YOU @$$HOLES!

    • Adrianos2kool4skool

      WAIT i think their doin this to fix stuff like errors and that

  • Bradypatey

    thia dang website is probly going down like minecraft for free so dont any of you get your hopes up on playing minecraft here agian. :(

  • derp

    wtf

  • derp

    bull crap y is it gone

  • Blaschkos

    I hade fun on minecraft, work!My life is now horrable.
    :(

  • Donandshirley

    Please put it back i was working on making things on my new 2 servers, and i was just beggining to play minecraft first time!!! :(

  • dante simmons

    I am from cz i never try before can you guys make minecraft work again pleas because is only the best game ever.so make work please thanks thanks ok pleas by.

    • Amosyong

      ya pls make minecraft work pls

  • Travisroe

    can you guys make minecraft work because it is blocked and i do not no how to unblock it please can you and i love that game thankyou

  • dejeed

    get minecraft working again

  • BRADUS

    Luckly i can still play it on here. HERES HOW GO TO GOOGLE AND SEARCH UP MINECRAFT FOR FREE FIND THIS SITE DONT CLICK IT MOVE YOUR MOUSE OVER IT AND LOOK TO THE LEFT IT SHOULD HAVE ARROWS LIKE THIS >>. CLICK ON THAT ARROW AND CLICK CACHE AND YOU SHOULD BE ON IT

  • BRADUS

    If my other comment doesnt work copy and paste this link:  http://webcache.googleusercontent.com/search?q=cache:i0sVohvAzfYJ:eligrey.com/minecraft/play.html+&cd=1&hl=en&ct=clnk&gl=us&client=firefox-a

    Make sure that your running on firefox while using this URL

  • CKowa10

    PLZ MAKE MINECRAFT WORK AGAIN! PLZ!

  • The Unhappy Smiley

    NOOOOOOOO!!! Minecraft is lost forever :(

  • amosyong

    i want to play minecraft

  • http://www.facebook.com/fred.wright.50 Fred Wright

    please  put minecraft back on it was the only thing that i go on my laptop for:(

  • MinecraftDude

    Put Minecraft back on PLEASE!!

  • Rockala111

    Please put Minecraft for free back up!  I don’t have a credit card or paypal to buy it and Minecraft for free was my favorite game out there!  So please put it back up!

  • Adrian

    kom on fuck you geys take up the mincraft agan

  • Mastermanwaheed

    can you guys fikx try minecraft free i am like minecraft soooooooooooooooo mutch !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! buhu ven you guys dont fikx it . plis help whit it i like minecraft do it today nowwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww…………….

  • QUITCOMPLAINING

    complaining isnt going to help. I’m sure there was a perfectly good reason why he shut it down probably something to with copyright because im sure it was illegal to allow minecraft to be free. There others downloads out there that you can play minecraft free and lastest version i have it but forgot where i got it. Just be careful alot of them have viriuses in them.

  • minecraftlover

    i cant play minecraft anywere else without paying or it bein crappy plz let us play agian!

  • RDRmaniac

    please guys put minecraft back on i really enjoyed it and i was probaly about to buy it. make minecraft free work again!

  • Katie

    THIS SUCKS!!!!!!!! TURN MINECRAFT BACK ON THIS ELI GREY THING IS STUPID!!!!!!!!!!!!! :(

  • Tsepten

    I NEED MIIIIIIIIIINNNNNNNNNNNNEEEEEECCCCCCCCCCCRRRRRRRRRRRRRAAAAAAAAFFFFFFFFFFFFFFTTTTTTTTTTTTTT!!!!!!!!!!!!! minecraft!!!!!!pllease please plaese plaese please please please please please we are all begging just fr you to give us minecraft……..

  • http://www.facebook.com/profile.php?id=100001673297755 Tsepten Gurung

    this is the only free minecraft . we dont need to do anything exept download java and play!!!!!!!!!!!!!!!!!!!!!!!!!!!! please give minecraft please please we beg you!!!!!! eli grey please we are witing for you to give minecraft give minecraft as soon as you can please eligrey, please. i’ll die without minecraft ;(

  • Matt Hit

    eli grey please put try minecraft free back up im only 9 and i love it PLEASE!!! :(

  • Matt Hit

    ELI GREY I NEED MMIINNEECCRRAAFFTT,minecraft,