Dart API Reference › dart:html › FileReader

dart:core

dart:coreimpl

dart:crypto

dart:html

dart:io

dart:isolate

dart:json

dart:uri

dart:utf

dart:web

intl

unittest

FileReader Interface

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. File objects may be obtained in one of two ways: from a FileList object returned as a result of a user selecting files using the <input> element, or from a drag and drop operation's DataTransfer object.

To create a FileReader, simply do the following:

var reader = new FileReader();

See Using files from web applications for details and examples.

from MDN

Extends

EventTarget

Constructors

Code new FileReader() #

FileReader();

Static Fields

Code final int DONE # 

static final int DONE = 2;

Code final int EMPTY # 

static final int EMPTY = 0;

Code final int LOADING # 

static final int LOADING = 1;

Methods

Code void abort() #

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

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 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3) .

from MDN
void abort();

Code FileReaderEvents get on() #

FileReaderEvents get on();

Code void readAsArrayBuffer(Blob blob) #

Starts reading the contents of the specified Blob or 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.

Parameters
blob
The DOM Blob or File to read into the ArrayBuffer.
from MDN
void readAsArrayBuffer(Blob blob);

Code void readAsBinaryString(Blob blob) #

Starts reading the contents of the specified Blob , which may be a 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.

Parameters
blob
The DOM Blob or File from which to read.
from MDN
void readAsBinaryString(Blob blob);

Code void readAsDataURL(Blob blob) #

Starts reading the contents of the specified Blob or 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.

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

<!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|image\/cis-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x-cmu-raster|image\/x-cmx|image\/x-icon|image\/x-portable-anymap|image\/x-portable-bitmap|image\/x-portable-graymap|image\/x-portable-pixmap|image\/x-rgb|image\/x-xbitmap|image\/x-xpixmap|image\/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>
Parameters
file
The DOM Blob or File from which to read.
from MDN
void readAsDataURL(Blob blob);

Code void readAsText(Blob blob, [String encoding]) #

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.

Parameters
blob
The DOM Blob or File from which to read.
encoding Optional
A string indicating the encoding to use for the returned data. By default, UTF-8 is assumed if this parameter is not specified.
from MDN
void readAsText(Blob blob, [String encoding]);

Code void $dom_addEventListener(String type, EventListener listener, [bool useCapture]) #

void $dom_addEventListener(String type, EventListener listener, [bool useCapture]);

Code bool $dom_dispatchEvent(Event evt) #

bool $dom_dispatchEvent(Event evt);

Code void $dom_removeEventListener(String type, EventListener listener, [bool useCapture]) #

void $dom_removeEventListener(String type, EventListener listener, [bool useCapture]);

Fields

Code final FileError error #

The error that occurred while reading the file. Read only.
from MDN
final FileError error;

Code final int readyState #

Indicates the state of the FileReader. This will be one of the State constants. Read only.
from MDN
final int readyState;

Code final Object result #

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. Read only.
from MDN
final Object result;

This page includes content from the Mozilla Foundation that is graciously licensed under a Creative Commons: Attribution-Sharealike license. Mozilla has no other association with Dart or dartlang.org. We encourage you to improve the web by contributing to The Mozilla Developer Network.

This page was generated at 2012-08-06 03:10:05.700

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the BSD License.

Comments that are not specifically about the API libraries will be moderated and possibly deleted. Because we may incorporate information from comments into the documentation, any comment submitted here is under the same license as the documentation.

Terms of Service | Privacy Policy