Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

6. Client-Side Data Storage Hacks > Hack 53. Convert a Data URI to a Blob and A...

Hack 53. Convert a Data URI to a Blob and Append It to Form Data with XHR2

HTML5 has turned the web browser into a full-fledged runtime. With all that new functionality in the client, you need ways to transmit data back to the server in a safe and programmatic manner. This hack shows you just how to do that.

At the time of this writing, the FormData object only accepts File or Blob objects from the File API for uploading images from within a form. Firefox offers the proprietary canvas.mozGetAsFile(), and the W3C-recommended canvas.toBlob() is yet to be implemented.

Imagine you are building an interface within a social media site that allows users to theme their profile page from a form that generates styles dynamically. You want to persist these styles in a database on the server by uploading the images in the background via an XMLHttpRequest, and load them on additional page requests. To do so you can make use of XHR2 and the new feature that allows you to upload Blobs and Files by attaching them to the FormData object.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint