Javascript File and Blob Detailed Explanation

File()

The File() constructor creates a new File object instance.

grammar

var myFile = new File(bits, name[, options]);

parameter

bits

An Array containing ArrayBuffer , ArrayBufferView , Blob , or DOMString objects — or any combination of these. This is the UTF-8 encoded file content.

name

USVString , indicating the file name or file path.

options optional

Options object containing optional properties for the file. The available options are:

• type : A DOMString representing the MIME type of the content to be placed in the file. The default value is "".
• lastModified : A numeric value representing the Unix timestamp (in milliseconds) of when the file was last modified. The default value is Date.now().

Example

var file = new File(["my name"], "infoTxt", {
  type: "text/plain",
});

Blob()

A Blob object represents an immutable, raw file-like object. Its data can be read in text or binary format, and can also be converted into a ReadableStream for data manipulation.

Blob does not necessarily represent data in JavaScript's native format. The File interface is based on Blob, inheriting the functionality of blob and extending it to support files on the user's system. The API of the Blob object is also listed in the File interface.

To construct a Blob from other non-blob objects and data, use the Blob() constructor. To create a subset of a blob's data, use the slice() method. To get a Blob object corresponding to a file on the user's file system, see the File documentation.

grammar

var aBlob = new Blob( array, options );

Returns a newly created Blob object whose content consists of the concatenation of the arrays given in the parameters.

parameter

• array is an Array of ArrayBuffer , ArrayBufferView , Blob , DOMString , or a mixture of similar objects that will be put into the Blob . DOMStrings are encoded as UTF-8.
• options is an optional BlobPropertyBag dictionary that may specify the following two properties:
  • type, the default value is "", which represents the MIME type of the array content that will be put into the blob.
  • endings, the default value is "transparent", which specifies how strings containing line endings \n are written. It is one of two values: "native", which means that the line endings are changed to the newline characters appropriate for the host operating system's file system, or "transparent", which means that the endings stored in the blob are left unchanged.

property

Blob.size Read-only

The size, in bytes, of the data contained in the Blob object.

Blob.type Read-only

A string indicating the MIME type of the data contained in this Blob object. If the type is unknown, the value is an empty string.

method

Blob.slice([start[, end[, contentType]]])

Returns a new Blob object containing the data in the specified range of the source Blob object.

Blob.stream()

Returns a ReadableStream that can read the blob's contents.

Blob.text()

Returns a promise that resolves to USVString containing the entire contents of the blob in UTF-8 format.

Blob.arrayBuffer()

Returns a promise that contains ArrayBuffer containing all the contents of the blob in binary format.

Example

const aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // An array containing DOMStrings const oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // Get the blob
oMyBlob.size // 32
oMyBlob.type // 'text/html'

The Blob() constructor allows you to create a Blob object from other objects. For example, to construct a blob from a string:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

Use Blob to create a URL pointing to a typed array

const imgBlob = fetchedImgData(); // Image resource returned through the interface, set the returned responseType to blob
const blob = new Blob([imgBlob], {type: 'image/png' }); // Pass in a suitable MIME type const url = URL.createObjectURL(blob);
// Will generate a URL string like blob:d3958f5c-0777-0845-9dcf-2cb28783acaf // You can use it like a normal URL, such as on img.src.

Extracting data from a Blob

One way to read the contents from a Blob is to use a FileReader. The following code reads the contents of a Blob as a typed array:

const reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.addEventListener("load ", function(readRes) {
   // readRes.target.result is converted to arrayBuffer's blob
});

Another way to read the contents of a Blob is to use the Response object. The following code reads the contents of a Blob as text:

var text = await new Response(blob).text();

The Blob can be read as a string or data URL by using other methods of FileReader.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!