Member-only story
JavaScript Blob Object Explained…
Inbuilt object that represents a file-like object of immutable, raw data.
Published in
3 min readApr 9, 2020
Blobs are immutable objects that represent raw data. This data isn’t necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user’s system.
Blobs are used for many things -
- They can be created from content from the network.
- They can be saved to disk or read from a disk.
- They are the underlying data structure for
Fileused in theFileReaderAPI, for example.
We can construct Blob from other non-blob objects and data, use the Blob() constructor.
Blob Constructor
The Blob Constructor allows one to create blobs from other objects. For example, to construct a blob from a string.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let hero = {name: 'Batman'}
let blobObject = new Blob([JSON.stringify(hero, null, 2)],
{ type: 'application/json' });console.log(blobObject);
</script>
</body>
</html>
Now, if we run this file in the browser, we will see the following output in the browser console.
Blob size property
The Blob.size property returns the size in bytes of the Blob or a File.
Syntax
var sizeInBytes = blob.sizeSee the following example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let hero = {name: 'Batman'}
let blobObject = new…
