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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: FileReader
slug: Web/API/FileReader
tags:
- API
- DOM
- File API
- Files
- NeedsTranslation
- Reference
- TopicStub
- WebAPI
translation_of: Web/API/FileReader
---
<p>{{ APIRef("File API") }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>FileReader</code> object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using {{ domxref("File") }} or {{ domxref("Blob") }} objects to specify the file or data to read.</p>
<p>File objects may be obtained from a {{ domxref("FileList") }} object returned as a result of a user selecting files using the {{ HTMLElement("input") }} element, from a drag and drop operation's <a href="/En/DragDrop/DataTransfer" title="En/DragDrop/DataTransfer"><code>DataTransfer</code></a> object, or from the <code>mozGetAsFile()</code> API on an {{ domxref("HTMLCanvasElement") }}.</p>
<h2 id="Constructor">Constructor</h2>
<pre class="syntaxbox">FileReader FileReader();</pre>
<p>See <a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a> for details and examples.</p>
<h2 id="Properties" name="Properties">Properties</h2>
<dl>
<dt>{{domxref("FileReader.error")}} {{readonlyinline}}</dt>
<dd>A {{domxref("DOMError")}} representing the error that occurred while reading the file.</dd>
<dt>{{domxref("FileReader.readyState")}} {{readonlyinline}}</dt>
<dd>A number indicating the state of the <code>FileReader</code>. This will be one of the {{ anch("State constants") }}.</dd>
<dt>{{domxref("FileReader.result")}} {{readonlyinline}}</dt>
<dd>The file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.</dd>
</dl>
<h3 id="Event_handlers">Event handlers</h3>
<dl>
<dt>{{domxref("FileReader.onabort")}}</dt>
<dd>A handler for the {{event("abort")}} event. This event is triggered each time the reading operation is aborted.</dd>
<dt>{{domxref("FileReader.onerror")}}</dt>
<dd>A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.</dd>
<dt>{{domxref("FileReader.onload")}}</dt>
<dd>A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.</dd>
<dt>{{domxref("FileReader.onloadstart")}}</dt>
<dd>A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.</dd>
<dt>{{domxref("FileReader.onloadend")}}</dt>
<dd>A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).</dd>
<dt>{{domxref("FileReader.onprogress")}}</dt>
<dd>A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.</dd>
</dl>
<div class="note">
<p>Note: As <code>FileReader</code> inherits from {{domxref("EventTarget")}}, all those events can also be listened for by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p>
</div>
<h3 id="State_constants" name="State_constants">State constants</h3>
<ul>
<li><code>EMPTY </code> : <code>0</code> : No data has been loaded yet.</li>
<li><code>LOADING</code> : <code>1</code> : Data is currently being loaded.</li>
<li><code>DONE </code> : <code>2</code> : The entire read request has been completed.</li>
</ul>
<h2 id="Methods" name="Methods">Methods</h2>
<dl>
<dt>{{domxref("FileReader.abort()")}}</dt>
<dd>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</dd>
<dt>{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}</dt>
<dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.</dd>
<dt>{{domxref("FileReader.readAsBinaryString()")}}</dt>
<dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the raw binary data from the file as a string.</dd>
<dt>{{domxref("FileReader.readAsDataURL()")}}</dt>
<dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</dd>
<dt>{{domxref("FileReader.readAsText()")}}</dt>
<dd>Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the <code>result</code> attribute contains the contents of the file as a text string.</dd>
</dl>
<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','#FileReader-interface','FileReader')}}</td>
<td>{{Spec2('File API')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer*</th>
<th>Opera*</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatGeckoDesktop("1.9.2") }}</td>
<td>7</td>
<td>10</td>
<td>12.02</td>
<td>6.0.2</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>32</td>
<td>3</td>
<td>10</td>
<td>11.5</td>
<td>6.1</td>
</tr>
</tbody>
</table>
</div>
<h3 id="Implementation_notes">Implementation notes</h3>
<ul>
<li>IE9 has a <a href="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info" title="http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info">File API Lab</a>.</li>
<li>Opera has <a href="http://www.opera.com/docs/specs/presto28/file/" title="http://my.opera.com/desktopteam/blog/2011/04/05/stability-gmail-socks">partial support</a> in 11.1.</li>
</ul>
<h4 id="Gecko-specific_notes">Gecko-specific notes</h4>
<ul>
<li>Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all {{ domxref("Blob") }} parameters below were {{ domxref("File") }} parameters; this has since been updated to match the specification correctly.</li>
<li>Prior to Gecko 13.0 {{ geckoRelease("13.0") }} the <code>FileReader.error</code> property returned a {{ domxref("FileError") }} object. This interface has been removed and <code>FileReader.error</code> is now returning the {{ domxref("DOMError") }} object as defined in the latest FileAPI draft.</li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en/Using_files_from_web_applications" title="en/Using files from web applications">Using files from web applications</a></li>
<li>{{ domxref("File") }}</li>
<li>{{ domxref("Blob") }}</li>
<li><a href="/en-US/docs/nsIDOMFileReader">nsIDOMFileReader</a> - For addons/privileged scope</li>
</ul>
|
