Skip to content

How can JavaScript upload a blob ?

JavaScript Blob

Last Updated : 15 Oct, 2024

A Blob object represents a collection of binary data stored as a file. Unlike a mere reference to a file, a blob possesses its own size and MIME type, similar to regular files.

Depending on the browser’s capabilities and the blob’s size, this data can be stored either in the memory or filesystem of the user. Blobs can be utilized in various applications, functioning like files.

Moreover, the content of a blob can be easily read as an ArrayBuffer, making blobs a practical choice for managing and storing binary data in web development.

Syntax:

let abc = new Blob(["Blob Content"], 
    {type: Blob Property containing MIME property})

Apart from inserting data directly into Blob, we can also read data from this Blob using the FileReader class:

javascript

let abc = new Blob(["GeeksForGeeks"],                  {type : "text/plain"}); let def = new FileReader(); def.addEventListener("loadend", function(e) {     document.getElementById("para").innerHTML                      = e.srcElement.result; });  def.readAsText(abc);

In HTML file, we just create a simple <p> element with id=”para”:

html

<p id="para"></p>

And you will get the below output:

GeeksForGeeks

Blob URL’s:

Just like we have file URLs that refer to some real files in the local filesystem, we also have Blob URLs that refer to the Blob. Blob URL’s are quite similar to any regular URL’s and hence can be used almost anywhere that we can use the general URL’s. A Blob can be easily used as an URL for <a>, <img> or other tags, to display its contents. The blob URL pointing towards a blob can be obtained using the createObjectURL object:

HTML

<!DOCTYPE html> <html>  <head>     <title>         JavaScript Blob     </title> </head>  <body>     <a download="gfg.txt" href='#'         id="link">Download</a>      <script>         let abc = new Blob(["Geeks For Geeks"],                 { type: 'text/plain' });          link.href = URL.createObjectURL(abc);     </script> </body>  </html>

Output: You will be getting a downloaded dynamically generated Blob with Geeks For Geeks as its content:

Blob To ArrayBuffer:

The Blob constructor can be used to create blobs from anything including any type of BufferSource. For low-level processing, we can use the lowest level ArrayBuffer from the blob using FileReader:

javascript

let def = new FileReader(); def.readAsArrayBuffer(abc); def.onload = function(event) { let res = def.result; };

Positive points for using Blobs:

Blobs are a good option for adding large binary data files to a database and can be easily referenced.
It is easy to set access rights using rights management while using Blobs.
Database backups of Blobs contain all the data.

Negative points for using Blobs:

Not all databases permit the use of Blobs.
Blobs are inefficient due to the amount of disk space required and access time.
Creating backups is highly time consuming due to the file size of Blobs.

How can JavaScript upload a blob ?

S

Slash_IT

Improve

Article Tags :

Similar Reads

How can JavaScript upload a blob ?

There are many ways to upload a blob (a group of bytes that holds the data stored in a file) in JavaScript, using XMLHttpRequest, Fetch API, jQuery. In this tutorial, we will discuss the two most common ways that are supported by a majority of the browsers. Note: To test our HTTP request, you can us

What is a Blob Object in JavaScript ?

In JavaScript, a Blob (Binary Large Object) is an object that represents raw binary data(collection of bytes). It is commonly used to handle and manipulate binary data, such as images, audio, video, or other types of files. The Blob object allows you to create, modify, and manipulate binary data in

How to Convert JSON to Blob in JavaScript ?

This article explores how to convert a JavaScript Object Notation (JSON) object into a Blob object in JavaScript. Blobs represent raw data, similar to files, and can be useful for various tasks like downloading or processing JSON data. What is JSON and Blob?JSON (JavaScript Object Notation): A light

JavaScript ArrayBuffer() Constructor

JavaScript ArrayBuffer Constructor is used to create a new ArrayBuffer object. ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. This object can only be created with the new keyword. If the object is created without the new keyword it will throw a TypeError Synt

How to Convert Base64 to Blob in JavaScript?

Working with files and data in web applications often involves dealing with binary data. One common scenario is converting a Base64 string into a Blob object, which can then be used in various ways, such as creating downloadable files or uploading images to a server. This article will guide you thro

JavaScript ArrayBuffer Reference

ArrayBuffer is used to represent a generic, fixed-length raw binary data buffer. The contents of an ArrayBuffer cannot be directly manipulated and can only be accessed through a DataView Object or one of the typed array objects. These Objects are used to read and write the contents of the buffer. Sy

JavaScript BigUint64Array() Constructor

The BigUint64Array() Constructor creates a new typed array of the 64-bit unsigned integers (BigInts). Typed arrays are a way to handle and manipulate binary data in a specific format. It allows to create arrays for storing large unsigned 64-bit integers. It is part of the JavaScript TypedArray objec

How to Convert Blob Data to JSON in JavaScript ?

When dealing with Blob data in JavaScript, such as binary data or files, we may need to convert it into JSON format for doing so JavaScript provides us with various methods as listed below. Table of Content Using FileReader APIUsing TextDecoder APIUsing FileReader APIIn this approach, we first use t

How to Convert Base64 to File in JavaScript?

In web development, Base64 encoding is often used to represent binary data, such as images or files, with a string of ASCII characters, sometimes you may be required to change this Base64 string back into a file for instance for file uploads, downloads, or processing in the browser, this article aim

JavaScript arrayBuffer byteLength Property

The Javascript arrayBuffer.byteLength is a property in JavaScript that return the length of an ArrayBuffer in a byte. ArrayBuffer is an object which is used to represent fixed-length binary data.Â Difference between property and function in javascript. Property in JavaScript is nothing but a value w