1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: Blob
slug: Web/API/Blob
tags:
- API
- Blob
- File API
- Interface
- NeedsTranslation
- Raw
- Reference
- TopicStub
- data
translation_of: Web/API/Blob
---
<div>{{APIRef("File API")}}</div>
<p>The <strong><code>Blob</code></strong> object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a {{DOMxRef("ReadableStream")}} so its methods can be used for processing the data.</p>
<p>Blobs can represent data that isn't necessarily in a JavaScript-native format. The {{DOMxRef("File")}} interface is based on <code>Blob</code>, inheriting blob functionality and expanding it to support files on the user's system.</p>
<h2 id="Using_blobs">Using blobs</h2>
<p>To construct a <code>Blob</code> from other non-blob objects and data, use the {{DOMxRef("Blob.Blob", "Blob()")}} constructor. To create a blob that contains a subset of another blob's data, use the {{DOMxRef("Blob.slice()", "slice()")}} method. To obtain a <code>Blob</code> object for a file on the user's file system, see the {{DOMxRef("File")}} documentation.</p>
<p>The APIs accepting <code>Blob</code> objects are also listed in the {{DOMxRef("File")}} documentation.</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{DOMxRef("Blob.Blob", "Blob()")}}</dt>
<dd>Returns a newly created <code>Blob</code> object which contains a concatenation of all of the data in the array passed into the constructor.</dd>
</dl>
<h2 id="Instance_properties">Instance properties</h2>
<dl>
<dt>{{DOMxRef("Blob.prototype.size")}} {{readonlyinline}}</dt>
<dd>The size, in bytes, of the data contained in the <code>Blob</code> object.</dd>
<dt>{{DOMxRef("Blob.prototype.type")}} {{readonlyinline}}</dt>
<dd>A string indicating the MIME type of the data contained in the <code>Blob</code>. If the type is unknown, this string is empty.</dd>
</dl>
<h2 id="Instance_methods">Instance methods</h2>
<dl>
<dt>{{DOMxRef("Blob.prototype.arrayBuffer()")}}</dt>
<dd>Returns a promise that resolves with an {{DOMxRef("ArrayBuffer")}} containing the entire contents of the <code>Blob</code> as binary data.</dd>
<dt>{{DOMxRef("Blob.prototype.slice()")}}</dt>
<dd>Returns a new <code>Blob</code> object containing the data in the specified range of bytes of the blob on which it's called.</dd>
<dt>{{DOMxRef("Blob.prototype.stream()")}}</dt>
<dd>Returns a {{DOMxRef("ReadableStream")}} that can be used to read the contents of the <code>Blob</code>.</dd>
<dt>{{DOMxRef("Blob.prototype.text()")}}</dt>
<dd>Returns a promise that resolves with a {{DOMxRef("USVString")}} containing the entire contents of the <code>Blob</code> interpreted as UTF-8 text.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h3 id="Creating_a_blob">Creating a blob</h3>
<p>The {{DOMxRef("Blob.Blob", "Blob()")}} constructor can create blobs from other objects. For example, to construct a blob from a JSON string:</p>
<pre class="brush: js notranslate">const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});</pre>
<h3 id="Creating_a_URL_representing_the_contents_of_a_typed_array">Creating a URL representing the contents of a typed array</h3>
<p>The following code creates a JavaScript <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed array</a> and creates a new <code>Blob</code> containing the typed array's data. It then calls {{DOMxRef("URL.createObjectURL()")}} to convert the blob into a {{glossary("URL")}}.</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><p>This example creates a typed array containing the ASCII codes
for the space character through the letter Z, then converts it
to an object URL. A link to open that object URL is created.
Click the link to see the decoded object URL.</p></pre>
<h4 id="JavaScript">JavaScript</h4>
<p>The main piece of this code for example purposes is the <code>typedArrayToURL()</code> function, which creates a <code>Blob</code> from the given typed array and returns an object URL for it. Having converted the data into an object URL, it can be used in a number of ways, including as the value of the {{HTMLElement("img")}} element's {{htmlattrxref("src", "img")}} attribute (assuming the data contains an image, of course).</p>
<pre class="brush: js notranslate">function typedArrayToURL(typedArray, mimeType) {
return URL.createObjectURL(new Blob([typedArray.buffer], {type: mimeType}))
}
const bytes = new Uint8Array(59);
for(let i = 0; i < 59; i++) {
bytes[i] = 32 + i;
}
const url = typedArrayToURL(bytes, 'text/plain');
const link = document.createElement('a');
link.href = url;
link.innerText = 'Open the array URL';
document.body.appendChild(link);</pre>
<h4 id="Result">Result</h4>
<p>Click the link in the example to see the browser decode the object URL.</p>
<p>{{EmbedLiveSample("Creating_a_URL_representing_the_contents_of_a_typed_array", 600, 200)}}</p>
<h3 id="Extracting_data_from_a_blob">Extracting data from a blob</h3>
<p>One way to read content from a <code>Blob</code> is to use a {{DOMxRef("FileReader")}}. The following code reads the content of a <code>Blob</code> as a typed array:</p>
<pre class="brush: js notranslate">const reader = new FileReader();
reader.addEventListener('loadend', () => {
// reader.result contains the contents of blob as a typed array
});
reader.readAsArrayBuffer(blob);</pre>
<p>Another way to read content from a <code>Blob</code> is to use a {{domxref("Response")}}. The following code reads the content of a <code>Blob</code> as text:</p>
<pre class="brush: js notranslate">const text = await (new Response(blob)).text();
</pre>
<p>Or by using {{DOMxRef("Blob.prototype.text()")}}:</p>
<pre class="brush: js notranslate">const text = await blob.text();</pre>
<p>By using other methods of <code>FileReader</code>, it is possible to read the contents of a Blob as a string or a data URL.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('File API', '#blob-section', 'The <code>Blob</code> interface')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Blob")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{DOMxRef("BlobBuilder")}}</li>
<li>{{DOMxRef("FileReader")}}</li>
<li>{{DOMxRef("File")}}</li>
<li>{{DOMxRef("URL.createObjectURL")}}</li>
<li><a href="/en-US/docs/Web/API/File/Using_files_from_web_applications">Using files from web applications</a></li>
</ul>
|
