Dart API Reference › dart:html › FileReader

args

dart:async

dart:chrome

dart:collection

dart:core

dart:crypto

dart:html

dart:indexed_db

dart:io

dart:isolate

dart:json

dart:math

dart:mirrors

dart:svg

dart:typed_data

dart:uri

dart:utf

dart:web_audio

dart:web_gl

dart:web_sql

fixnum

intl

logging

matcher

mdv_observe

meta

mock

serialization

source_maps

unittest

FileReader class

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
@DocsEditable
@DomName('FileReader')
class FileReader extends EventTarget native "FileReader" {

 @DomName('FileReader.abortEvent')
 @DocsEditable
 static const EventStreamProvider<ProgressEvent> abortEvent = const EventStreamProvider<ProgressEvent>('abort');

 @DomName('FileReader.errorEvent')
 @DocsEditable
 static const EventStreamProvider<Event> errorEvent = const EventStreamProvider<Event>('error');

 @DomName('FileReader.loadEvent')
 @DocsEditable
 static const EventStreamProvider<ProgressEvent> loadEvent = const EventStreamProvider<ProgressEvent>('load');

 @DomName('FileReader.loadendEvent')
 @DocsEditable
 static const EventStreamProvider<ProgressEvent> loadEndEvent = const EventStreamProvider<ProgressEvent>('loadend');

 @DomName('FileReader.loadstartEvent')
 @DocsEditable
 static const EventStreamProvider<ProgressEvent> loadStartEvent = const EventStreamProvider<ProgressEvent>('loadstart');

 @DomName('FileReader.progressEvent')
 @DocsEditable
 static const EventStreamProvider<ProgressEvent> progressEvent = const EventStreamProvider<ProgressEvent>('progress');

 @DomName('FileReader.FileReader')
 @DocsEditable
 factory FileReader() {
   return FileReader._create_1();
 }
 static FileReader _create_1() => JS('FileReader', 'new FileReader()');

 @DomName('FileReader.DONE')
 @DocsEditable
 static const int DONE = 2;

 @DomName('FileReader.EMPTY')
 @DocsEditable
 static const int EMPTY = 0;

 @DomName('FileReader.LOADING')
 @DocsEditable
 static const int LOADING = 1;

 @DomName('FileReader.error')
 @DocsEditable
 final FileError error;

 @DomName('FileReader.readyState')
 @DocsEditable
 final int readyState;

 @DomName('FileReader.result')
 @DocsEditable
 @Creates('String|ByteBuffer|Null')
 final Object result;

 @DomName('FileReader.abort')
 @DocsEditable
 void abort() native;

 @JSName('addEventListener')
 @DomName('FileReader.addEventListener')
 @DocsEditable
 void $dom_addEventListener(String type, EventListener listener, [bool useCapture]) native;

 @DomName('FileReader.dispatchEvent')
 @DocsEditable
 bool dispatchEvent(Event evt) native;

 @DomName('FileReader.readAsArrayBuffer')
 @DocsEditable
 void readAsArrayBuffer(Blob blob) native;

 @DomName('FileReader.readAsBinaryString')
 @DocsEditable
 void readAsBinaryString(Blob blob) native;

 @JSName('readAsDataURL')
 @DomName('FileReader.readAsDataURL')
 @DocsEditable
 void readAsDataUrl(Blob blob) native;

 @DomName('FileReader.readAsText')
 @DocsEditable
 void readAsText(Blob blob, [String encoding]) native;

 @JSName('removeEventListener')
 @DomName('FileReader.removeEventListener')
 @DocsEditable
 void $dom_removeEventListener(String type, EventListener listener, [bool useCapture]) native;

 @DomName('FileReader.onabort')
 @DocsEditable
 Stream<ProgressEvent> get onAbort => abortEvent.forTarget(this);

 @DomName('FileReader.onerror')
 @DocsEditable
 Stream<Event> get onError => errorEvent.forTarget(this);

 @DomName('FileReader.onload')
 @DocsEditable
 Stream<ProgressEvent> get onLoad => loadEvent.forTarget(this);

 @DomName('FileReader.onloadend')
 @DocsEditable
 Stream<ProgressEvent> get onLoadEnd => loadEndEvent.forTarget(this);

 @DomName('FileReader.onloadstart')
 @DocsEditable
 Stream<ProgressEvent> get onLoadStart => loadStartEvent.forTarget(this);

 @DomName('FileReader.onprogress')
 @DocsEditable
 Stream<ProgressEvent> get onProgress => progressEvent.forTarget(this);
}

Extends

Interceptor > EventTarget > FileReader

Static Properties

const EventStreamProvider<ProgressEvent> abortEvent # 

static const EventStreamProvider<ProgressEvent> abortEvent = const EventStreamProvider<ProgressEvent>('abort')

const int DONE #

The entire read request has been completed.
from MDN
static const int DONE = 2

const int EMPTY #

No data has been loaded yet.
from MDN
static const int EMPTY = 0

const EventStreamProvider<Event> errorEvent # 

static const EventStreamProvider<Event> errorEvent = const EventStreamProvider<Event>('error')

const EventStreamProvider<ProgressEvent> loadEndEvent # 

static const EventStreamProvider<ProgressEvent> loadEndEvent = const EventStreamProvider<ProgressEvent>('loadend')

const EventStreamProvider<ProgressEvent> loadEvent # 

static const EventStreamProvider<ProgressEvent> loadEvent = const EventStreamProvider<ProgressEvent>('load')

const int LOADING #

Data is currently being loaded.
from MDN
static const int LOADING = 1

const EventStreamProvider<ProgressEvent> loadStartEvent # 

static const EventStreamProvider<ProgressEvent> loadStartEvent = const EventStreamProvider<ProgressEvent>('loadstart')

const EventStreamProvider<ProgressEvent> progressEvent # 

static const EventStreamProvider<ProgressEvent> progressEvent = const EventStreamProvider<ProgressEvent>('progress')

Constructors

factory FileReader() #

@DomName('FileReader.FileReader')
@DocsEditable
factory FileReader() {
 return FileReader._create_1();
}

Properties

final FileError error #

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

final int hashCode #

inherited from Interceptor

Get a hash code for this object.

All objects have hash codes. Hash codes are guaranteed to be the same for objects that are equal when compared using the equality operator ==. Other than that there are no guarantees about the hash codes. They will not be consistent between runs and there are no distribution guarantees.

If a subclass overrides hashCode it should override the equality operator as well to maintain consistency.

docs inherited from Object 
int get hashCode => Primitives.objectHashCode(this);

final Events on #

inherited from EventTarget

This is an ease-of-use accessor for event streams which should only be used when an explicit accessor is not available.

Events get on => new Events(this);

final Stream<ProgressEvent> onAbort #

Called when the read operation is aborted.
from MDN
@DomName('FileReader.onabort')
@DocsEditable
Stream<ProgressEvent> get onAbort => abortEvent.forTarget(this);

final Stream<Event> onError #

Called when an error occurs.
from MDN
@DomName('FileReader.onerror')
@DocsEditable
Stream<Event> get onError => errorEvent.forTarget(this);

final Stream<ProgressEvent> onLoad #

Called when the read operation is successfully completed.
from MDN
@DomName('FileReader.onload')
@DocsEditable
Stream<ProgressEvent> get onLoad => loadEvent.forTarget(this);

final Stream<ProgressEvent> onLoadEnd #

Called when the read is completed, whether successful or not. This is called after either onload or onerror.
from MDN
@DomName('FileReader.onloadend')
@DocsEditable
Stream<ProgressEvent> get onLoadEnd => loadEndEvent.forTarget(this);

final Stream<ProgressEvent> onLoadStart #

Called when reading the data is about to begin.
from MDN
@DomName('FileReader.onloadstart')
@DocsEditable
Stream<ProgressEvent> get onLoadStart => loadStartEvent.forTarget(this);

final Stream<ProgressEvent> onProgress #

Called periodically while the data is being read.
from MDN
@DomName('FileReader.onprogress')
@DocsEditable
Stream<ProgressEvent> get onProgress => progressEvent.forTarget(this);

final int readyState #

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

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

final Type runtimeType #

inherited from Interceptor

A representation of the runtime type of the object.

docs inherited from Object 
Type get runtimeType => getRuntimeType(this);

Operators

bool operator ==(other) #

inherited from Interceptor

The equality operator.

The default behavior for all Objects is to return true if and only if this and other are the same object.

If a subclass overrides the equality operator it should override the hashCode method as well to maintain consistency.

docs inherited from Object 
bool operator ==(other) => identical(this, other);

Methods

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
@DomName('FileReader.abort')
@DocsEditable
void abort() native;

bool dispatchEvent(Event evt) #

@DomName('FileReader.dispatchEvent')
@DocsEditable
bool dispatchEvent(Event evt) native;

dynamic noSuchMethod(Invocation invocation) #

inherited from Interceptor

noSuchMethod is invoked when users invoke a non-existant method on an object. The name of the method and the arguments of the invocation are passed to noSuchMethod in an Invocation. If noSuchMethod returns a value, that value becomes the result of the original invocation.

The default behavior of noSuchMethod is to throw a noSuchMethodError.

docs inherited from Object 
dynamic noSuchMethod(Invocation invocation) {
 throw new NoSuchMethodError(
     this,
     _symbolToString(invocation.memberName),
     invocation.positionalArguments,
     _symbolMapToStringMap(invocation.namedArguments));
}

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
@DomName('FileReader.readAsArrayBuffer')
@DocsEditable
void readAsArrayBuffer(Blob blob) native;

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
@DomName('FileReader.readAsBinaryString')
@DocsEditable
void readAsBinaryString(Blob blob) native;

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
@JSName('readAsDataURL')
@DomName('FileReader.readAsDataURL')
@DocsEditable
void readAsDataUrl(Blob blob) native;

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
@DomName('FileReader.readAsText')
@DocsEditable
void readAsText(Blob blob, [String encoding]) native;

String toString() #

inherited from Interceptor

Returns a string representation of this object.

docs inherited from Object 
String toString() => Primitives.objectToString(this);

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

@JSName('addEventListener')
@DomName('FileReader.addEventListener')
@DocsEditable
void $dom_addEventListener(String type, EventListener listener, [bool useCapture]) native;

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

@JSName('removeEventListener')
@DomName('FileReader.removeEventListener')
@DocsEditable
void $dom_removeEventListener(String type, EventListener listener, [bool useCapture]) native;

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 2013-05-18 02:22:24.285

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.

Terms of Service | Privacy Policy