FileReader

  • Revision slug: Web/API/FileReader
  • Revision title: FileReader
  • Revision id: 474933
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

Summary

The FileReader 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.

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 DataTransfer object, or from the mozGetAsFile() API on an {{ domxref("HTMLCanvasElement") }}.

Constructor

FileReader FileReader();

See Using files from web applications for details and examples.

Properties

{{domxref("FileReader.error")}} {{readonlyinline}}
A {{domxref("DOMError")}} representing the error that occurred while reading the file.
{{domxref("FileReader.readyState")}} {{readonlyinline}}
A number indicating the state of the FileReader. This will be one of the {{ anch("State constants") }}.
{{domxref("FileReader.result")}} {{readonlyinline}}
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.

Events Handler

{{domxref("FileReader.onabort")}}
A handler for the {{event("abort")}} event. This event is triggered each time the reading operation is aborted.
{{domxref("FileReader.onerror")}}
A handler for the {{event("error")}} event. This event is triggered each time the reading operation encounter an error.
{{domxref("FileReader.onload")}}
A handler for the {{event("load")}} event. This event is triggered each time the reading operation is successfully completed.
{{domxref("FileReader.onloadstart")}}
A handler for the {{event("loadstart")}} event. This event is triggered each time the reading is starting.
{{domxref("FileReader.onloadend")}}
A handler for the {{event("loadend")}} event. This event is triggered each time the reading operation is completed (either in success or failure).
{{domxref("FileReader.onprogress")}}
A handler for the {{event("progress")}} event. This event is triggered while reading a {{domxref("Blob")}} content.

Note: As FileReader inherit from {{domxref("EventTarget")}}, all those events can also be listen by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.

State constants

  • EMPTY   : (0) : No data has been loaded yet.
  • LOADING : (1) : Data is currently being loaded.
  • DONE    : (2) : The entire read request has been completed.

Methods

{{domxref("FileReader.abort()")}}
Aborts the read operation. Upon return, the readyState will be DONE.
{{domxref("FileReader.readAsArrayBuffer()")}} {{ gecko_minversion_inline("7.0") }}
Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the result attribute contains an {{domxref("ArrayBuffer")}} representing the file's data.
{{domxref("FileReader.readAsBinaryString()")}}
Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the result attribute contains the raw binary data from the file as a string.
{{domxref("FileReader.readAsDataURL()")}}
Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the result attribute contains a data: URL representing the file's data.
{{domxref("FileReader.readAsText()")}}
Starts reading the contents of the specified {{ domxref("Blob") }}, once finished, the result attribute contains the contents of the file as a text string.

abort()

Aborts the read operation. Upon return, the readyState will be DONE.

void abort();
Parameters

None.

Exceptions thrown
DOM_FILE_ABORT_ERR
abort() was called while no read operation was in progress (that is, the state wasn't LOADING). {{ note("This exception was not thrown by Gecko until Gecko 6.0.") }}

{{ method_gecko_minversion("readAsArrayBuffer","7.0") }}

Starts reading the contents of the specified {{ domxref("Blob") }} or {{ domxref("File") }}. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains an ArrayBuffer representing the file's data.

void readAsArrayBuffer(
  in Blob blob
);
Parameters
blob
The DOM {{ domxref("Blob") }} or {{ domxref("File") }} to read into the ArrayBuffer.

readAsBinaryString()

Starts reading the contents of the specified {{ domxref("Blob") }}, which may be a {{ domxref("File") }}. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the raw binary data from the file.

void readAsBinaryString(
  in Blob blob
);

This method, used in conjuncton with the sendAsBinary XMLHttpRequest's method, make possible to read and upload any type of file.

Parameters
blob
The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.

Example:

    var canvas = document.createElement('canvas');
    var desiredCanvasHeight = 200;
    var desiredCanvasWidth = 200;
    canvas.id = 'mycanvas';
    canvas.style.width = desiredCanvasWidth + "px";
    canvas.style.height = desiredCanvasHeight + "px";
    canvas.width = desiredCanvasWidth;
    canvas.height = desiredCanvasHeight;

    var paramCtxDrawWindow = {
                                window: window,
                                x: 0,
                                y: 0,
                                width: desiredCanvasWidth,
                                height: desiredCanvasHeight,
                                bgColor: 'rgb(255,255,255)',
                                flags: null,
                            };
    ctx.drawWindow(paramCtxDrawWindow.window, paramCtxDrawWindow.x, paramCtxDrawWindow.y, paramCtxDrawWindow.width, paramCtxDrawWindow.height, paramCtxDrawWindow.bgColor, paramCtxDrawWindow.flags);


          canvas.toBlob(function(blob) {
            var reader = new window.FileReader();
            reader.readAsBinaryString(blob);
            reader.onloadend = function() {
                blobBinaryString = reader.result;                
                window.alert(blobBinaryString);
            }

readAsDataURL()

Starts reading the contents of the specified {{ domxref("Blob") }} or {{ domxref("File") }}. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains a data: URL representing the file's data.

void readAsDataURL(
  in Blob file
);
Parameters
file
The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.
Example

This method is useful, for example, to get a preview of an image before uploading it (download example):

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^image\/(?:bmp|cis\-cod|gif|ief|jpeg|pipeg|png|svg\+xml|tiff|x\-cmu\-raster|x\-cmx|x\-icon|x\-portable\-anymap|x\-portable\-bitmap|x\-portable\-graymap|x\-portable\-pixmap|x\-rgb|x\-xbitmap|x\-xpixmap|x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>
Note: The constructor FileReader() was not supported by Internet Explorer for versions before 10. For a full compatibility code you can see our crossbrowser preview possible solution.

readAsText()

Starts reading the specified blob's contents. When the read operation is finished, the readyState will become DONE, and the onloadend callback, if any, will be called. At that time, the result attribute contains the contents of the file as a text string.

void readAsText(
  in Blob blob,
  in DOMString encoding {{ optional_inline() }}
);
Parameters
blob
The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.
encoding {{ optional_inline() }}
A string indicating the encoding to use for the returned data. By default, UTF-8 is assumed if this parameter is not specified.

Specifications

Specification Status Comment
{{SpecName('File API','#FileReader-interface','FileReader')}} {{Spec2('File API')}} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer* Opera* Safari
Basic support {{ CompatGeckoDesktop("1.9.2") }} 7 10 12.02 6.0.2
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Implementation notes

Gecko-specific notes

  • 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.
  • Prior to Gecko 13.0 {{ geckoRelease("13.0") }} the FileReader.error property returned a {{ domxref("FileError") }} object. This interface has been removed and FileReader.error is now returning the {{ domxref("DOMError") }} object as defined in the latest FileAPI draft.

See also

Revision Source

<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&nbsp;{{ 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="State_constants" name="State_constants">Events Handler</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> inherit from {{domxref("EventTarget")}}, all those events can also be listen by using the {{domxref("EventTarget.addEventListener()","addEventListener")}} method.</p>
</div>
<h3 id="State_constants" name="State_constants">State constants</h3>
<ul>
  <li><code>EMPTY &nbsp;</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 &nbsp;&nbsp;</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>
<h3 id="abort()" name="abort()">abort()</h3>
<p>Aborts the read operation. Upon return, the <code>readyState</code> will be <code>DONE</code>.</p>
<pre class="eval">
void abort();
</pre>
<h6 id="Parameters" name="Parameters">Parameters</h6>
<p>None.</p>
<h6 id="Exceptions_thrown" name="Exceptions_thrown">Exceptions thrown</h6>
<dl>
  <dt>
    <code>DOM_FILE_ABORT_ERR</code></dt>
  <dd>
    <code>abort()</code> was called while no read operation was in progress (that is, the state wasn't <code>LOADING</code>). {{ note("This exception was not thrown by Gecko until Gecko 6.0.") }}</dd>
</dl>
<p>{{ method_gecko_minversion("readAsArrayBuffer","7.0") }}</p>
<p>Starts reading the contents of the specified {{ domxref("Blob") }} or {{ domxref("File") }}. When the read operation is finished, the <code>readyState</code> will become <code>DONE</code>, and the <code>onloadend</code> callback, if any, will be called. At that time, the <code>result</code> attribute contains an <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="/en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code> representing the file's data.</p>
<pre class="eval">
void readAsArrayBuffer(
  in Blob blob
);
</pre>
<h6 id="Parameters" name="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>blob</code></dt>
  <dd>
    The DOM {{ domxref("Blob") }} or {{ domxref("File") }} to read into the <code><a href="/en/JavaScript_typed_arrays/ArrayBuffer" title="/en/JavaScript_typed_arrays/ArrayBuffer">ArrayBuffer</a></code>.</dd>
</dl>
<h3 id="readAsBinaryString()" name="readAsBinaryString()">readAsBinaryString()</h3>
<p>Starts reading the contents of the specified {{ domxref("Blob") }}, which may be a {{ domxref("File") }}. When the read operation is finished, the <code>readyState</code> will become <code>DONE</code>, and the <code>onloadend</code> callback, if any, will be called. At that time, the <code>result</code> attribute contains the raw binary data from the file.</p>
<pre class="eval">
void readAsBinaryString(
  in Blob blob
);
</pre>
<p>This method, used in conjuncton with the <a href="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()" title="/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()"><code>sendAsBinary</code></a> <a href="/en-US/docs/DOM/XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest"><code>XMLHttpRequest</code></a>'s method, make possible to <a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">read and <strong>upload</strong> any type of file</a>.</p>
<h6 id="Parameters" name="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>blob</code></dt>
  <dd>
    The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.</dd>
</dl>
<p>Example:</p>
<pre>
    var canvas = document.createElement('canvas');
&nbsp;&nbsp;&nbsp; var desiredCanvasHeight = 200;
&nbsp;&nbsp;&nbsp; var desiredCanvasWidth = 200;
    canvas.id = 'mycanvas';
&nbsp;&nbsp;&nbsp; canvas.style.width = desiredCanvasWidth + "px";
&nbsp;&nbsp;&nbsp; canvas.style.height = desiredCanvasHeight + "px";
&nbsp;&nbsp;&nbsp; canvas.width = desiredCanvasWidth;
&nbsp;&nbsp;&nbsp; canvas.height = desiredCanvasHeight;

&nbsp;&nbsp;&nbsp; var paramCtxDrawWindow = {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; window: window,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; x: 0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; y: 0,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: desiredCanvasWidth,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; height: desiredCanvasHeight,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; bgColor: 'rgb(255,255,255)',
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; flags: null,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; };
&nbsp;&nbsp;&nbsp; ctx.drawWindow(paramCtxDrawWindow.window, paramCtxDrawWindow.x, paramCtxDrawWindow.y, paramCtxDrawWindow.width, paramCtxDrawWindow.height, paramCtxDrawWindow.bgColor, paramCtxDrawWindow.flags);


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; canvas.toBlob(function(blob) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var reader = new window.FileReader();
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader.readAsBinaryString(blob);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; reader.onloadend = function() {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; blobBinaryString = reader.result;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                window.alert(blobBinaryString);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
</pre>
<h3 id="readAsDataURL()" name="readAsDataURL()">readAsDataURL()</h3>
<p>Starts reading the contents of the specified {{ domxref("Blob") }} or {{ domxref("File") }}. When the read operation is finished, the <code>readyState</code> will become <code>DONE</code>, and the <code>onloadend</code> callback, if any, will be called. At that time, the <code>result</code> attribute contains a <code>data:</code> URL representing the file's data.</p>
<pre class="eval">
void readAsDataURL(
  in Blob file
);
</pre>
<h6 id="Parameters" name="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>file</code></dt>
  <dd>
    The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.</dd>
</dl>
<h6 id="Example">Example</h6>
<p>This method is useful, for example, to get a preview of an image before uploading it (<a class="internal" href="/@api/deki/files/6231/=image_upload_preview.html" title="image_upload_preview.html">download example</a>):</p>
<pre class="brush: html">
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /&gt;
&lt;title&gt;Image preview example&lt;/title&gt;
&lt;script type="text/javascript"&gt;
oFReader = new FileReader(), rFilter = /^image\/(?:bmp|cis\-cod|gif|ief|jpeg|pipeg|png|svg\+xml|tiff|x\-cmu\-raster|x\-cmx|x\-icon|x\-portable\-anymap|x\-portable\-bitmap|x\-portable\-graymap|x\-portable\-pixmap|x\-rgb|x\-xbitmap|x\-xpixmap|x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
&nbsp; document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
&nbsp; if (document.getElementById("uploadImage").files.length === 0) { return; }
&nbsp; var oFile = document.getElementById("uploadImage").files[0];
&nbsp; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
&nbsp; oFReader.readAsDataURL(oFile);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="loadImageFile();"&gt;
  &lt;form name="uploadForm"&gt;
    &lt;table&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

    &lt;p&gt;&lt;input type="submit" value="Send" /&gt;&lt;/p&gt;
  &lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<div class="note">
  <strong>Note:</strong> The constructor <code>FileReader()</code> was not supported by Internet Explorer for versions before 10. For a full compatibility code you can see our <a class="internal" href="/@api/deki/files/6232/=crossbrowser_image_preview.html" title="crossbrowser_image_preview.html">crossbrowser preview possible solution</a>.</div>
<h3 id="readAsText()" name="readAsText()">readAsText()</h3>
<p>Starts reading the specified blob's contents. When the read operation is finished, the <code>readyState</code> will become <code>DONE</code>, and the <code>onloadend</code> callback, if any, will be called. At that time, the <code>result</code> attribute contains the contents of the file as a text string.</p>
<pre class="eval">
void readAsText(
  in Blob blob,
  in DOMString encoding {{ optional_inline() }}
);
</pre>
<h6 id="Parameters" name="Parameters">Parameters</h6>
<dl>
  <dt>
    <code>blob</code></dt>
  <dd>
    The DOM {{ domxref("Blob") }} or {{ domxref("File") }} from which to read.</dd>
  <dt>
    <code>encoding</code> {{ optional_inline() }}</dt>
  <dd>
    A string indicating the encoding to use for the returned data. By default, UTF-8 is assumed if this parameter is not specified.</dd>
</dl>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">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>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</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>
</ul>
Revert to this revision