QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads An Introduction To JavaScript Blobs and File Interface

An Introduction To JavaScript Blobs and File Interface

html5-file-api

This post is a part 18 of Advanced JavaScript APIs post series.

In this article you will be learning all about JavaScript blobs. Every API in this post comes under HTML5 specification.


What is a Blob?

A blob object represents a chuck of bytes that holds data of a file. But a blob is not a reference to a actual file, it may seem like it is.

A blob has its size and MIME type just like a file has. Blob data is stored in the memory or filesystem depending on the browser and blob size. A blob can be used like a file wherever we use files.

Most APIs for working with blobs are asynchronous. But synchronous versions of APIs are also available so that they can be used in Web Workers.

Content of a blob can be read as ArrayBuffer and therefore it makes blobs very handy to store binary data.

Creating a Blob

A blob can be created using Blob class.

//first arguement must be an regular array. The array can be of any javascript objects. Array can contain array to make it multi dimensional
//second parameter must be a BlogPropertyBag object containing MIME property
var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});

In the above code we saw how we can insert data to a blob. We can read data from a blob using FileReader Class.

Blob URLs

As we have file:// URLs, referencing to a real file in local filesystem. Similarly we have blob:// URLs referencing to an blob. blob:// URLs can be used almost wherever we use regular URLs.

A blob:// URL to a blob can be obtained using the createObjectURL object.

Remote data as Blobs

We can retrieve remote files using AJAX and and store the file data inside a blob. AJAX API provides us a method to download and store remote files in form of blobs.

We can get the blob content in an ArrayBuffer and then analyze the ArrayBuffer as binary data. This can be done using FileReader.readAsArrayBuffer() method.

File Interface

A File object in JavaScript references an actual file in the local filesystem. This File object inherits all properties and methods from the Blob class. Although the File objects and Blob objects are different, they expose same methods and properties.

There is no way to create a File object, some JavaScript API return references File objects.

File object can be retrieved from a FileList object returned as a result of a user selecting files using the <input> element or from a drag and drop operation’s DataTransfer object.


Conclusion

Blobs are very useful while working with binary remote files. A blob can be very large i.e., can contain audio and video data too. They can be created dynamically and using blob URLs they can be used as files. You can use them in many different ways to make them more useful. Thanks for reading.

Jun 28, 2014Narayan Prusty
Preloading Resources In Browser using rel="prefetch"Responsive Images Tutorial
Comments: 6
  1. Vipin
    5 years ago

    How to delete a blob manually. I have created a blob that holds a large chunk of data, i want to delete it once my work is done.

    ReplyCancel
  2. Praneeth
    6 years ago

    Thank you, really useful content.

    ReplyCancel
  3. deepak
    6 years ago

    Hi can we use the bolb with angular and if my server calls are post and not get method to download the documents which are in excel format

    ReplyCancel
  4. everyone
    7 years ago

    Just wanted to let you know that you are a complete and utter piece of shit for disabling access to your site unless ad blocker is disabled. Good thing though, your site sucks and i will never visit it again.

    Go fuck yourself.

    ReplyCancel
    • cj
      6 years ago

      O_O

      ReplyCancel
    • You're not everyone
      5 years ago

      Ignore this douche. I am grateful for this FREE file. It would have taken at least a week to get this right.
      Enable ad-blocker or do what you want on your site without paying any attention to ungrateful cunts.

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 13 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is a Blob?
  • Creating a Blob
  • Blob URLs
  • Remote data as Blobs
  • File Interface
Related Articles
  • JavaScript ArrayBuffers And Typed Arrays
  • Storing Binary Data in Redis
  • Capturing Webcam Video and Microphone Audio Using HTML5
  • JavaScript “0b” Literal
  • Pre-rendering In Browser using rel=”prerender”
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license