JavaScript FileReader : EventTarget

constructor

FileReader is used to read the contents of a Blob or File.

Spec

Constructors

new FileReader() : FileReader

Constructs a new FileReader.

Example:

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

Run

Results:

Spec

Instance Properties

error : Error readonly

The error encountered during load.

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onloadstart = function() {
      reader.abort();
    };

    reader.onloadend = function() {
      console.log(reader.error.message);
    };

    reader.readAsDataURL(input.files[0]);
  };
</script>

Run

Results:

Spec

readyState : Number readonly

The current state of the reader. Will be one of EMPTY, LOADING, or DONE.

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var stateNames = {};
  stateNames[FileReader.EMPTY]   = 'EMPTY';
  stateNames[FileReader.LOADING] = 'LOADING';
  stateNames[FileReader.DONE]    = 'DONE';

  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      console.log('After load: ' + stateNames[reader.readyState]);
    };

    console.log('Before read: ' + stateNames[reader.readyState]);
    reader.readAsDataURL(input.files[0]);
    console.log('After read: ' + stateNames[reader.readyState]);
  };
</script>

Run

Results:

result : Object readonly

The result from the previous read. The result will be either a String or an ArrayBuffer. The result is only available after the load event fires.

Example:

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

Run

Results:

Spec

Instance Methods

abort() : undefined

Stops the current read operation.

Spec

readAsArrayBuffer(blob : Blob) : undefined

Begins reading from blob as an ArrayBuffer. The result will be stored on this.result after the 'load' event fires. See also Blob.arrayBuffer().

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var arrayBuffer = reader.result;

      console.log(arrayBuffer.byteLength);
    };
    reader.readAsArrayBuffer(input.files[0]);
  };
</script>

Run

Results:

Spec

readAsDataURL(blob : Blob) : undefined

Begins reading from blob as a 'data:' url string. The result will be stored on this.result after the 'load' event fires.

Example:

<input type='file' accept='image/*' onchange='openFile(event)'><br>
<img id='output'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var dataURL = reader.result;
      var output = document.getElementById('output');
      output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);
  };
</script>

Run

Results:

Spec

readAsText(blob : Blob, [encoding : String]) : undefined

Begins reading from blob as a string. The result will be stored on this.result after the 'load' event fires. For the valid values of encoding, see character sets. See also Blob.text().

Example:

<input type='file' accept='text/plain' onchange='openFile(event)'><br>
<img id='output'>
<script>
  var openFile = function(event) {
    var input = event.target;

    var reader = new FileReader();
    reader.onload = function(){
      var text = reader.result;
      console.log(reader.result.substring(0, 200));
    };
    reader.readAsText(input.files[0]);
  };
</script>

Run

Results:

Spec

Instance Events

onabort / 'abort' event

listener(event : ProgressEvent) : undefined

Called when the read is aborted with abort().

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    console.log('entering openFile()');
    var input = event.target;

    var printEventType = function(event) {
      console.log('got event: ' + event.type);

      if (event.type === 'loadstart') {
        reader.abort();
      }
    };

    var reader = new FileReader();
    reader.onloadstart = printEventType;
    reader.onprogress = printEventType;
    reader.onload = printEventType;
    reader.onloadend = printEventType;
    reader.onabort = printEventType;
    reader.onerror = printEventType;

    console.log('  starting read');
    reader.readAsDataURL(input.files[0]);
    console.log('leaving openFile()');
  };
</script>

Run

Results:

onerror / 'error' event

listener(event : ProgressEvent) : undefined

Called when there is an error during the load.

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    console.log('entering openFile()');
    var input = event.target;

    var printEventType = function(event) {
      console.log('got event: ' + event.type);

      if (event.type === 'loadstart') {
        reader.abort();
      }
    };

    var reader = new FileReader();
    reader.onloadstart = printEventType;
    reader.onprogress = printEventType;
    reader.onload = printEventType;
    reader.onloadend = printEventType;
    reader.onabort = printEventType;
    reader.onerror = printEventType;

    console.log('  starting read');
    reader.readAsDataURL(input.files[0]);
    console.log('leaving openFile()');
  };
</script>

Run

Results:

onload / 'load' event

listener(event : ProgressEvent) : undefined

Called when a read operation successfully completes.

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    console.log('entering openFile()');
    var input = event.target;

    var printEventType = function(event) {
      console.log('got event: ' + event.type);
    };

    var reader = new FileReader();
    reader.onloadstart = printEventType;
    reader.onprogress = printEventType;
    reader.onload = printEventType;
    reader.onloadend = printEventType;

    console.log('  starting read');
    reader.readAsDataURL(input.files[0]);
    console.log('leaving openFile()');
  };
</script>

Run

Results:

onloadend / 'loadend' event

listener(event : ProgressEvent) : undefined

Called after a read completes (either successfully or unsuccessfully).

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    console.log('entering openFile()');
    var input = event.target;

    var printEventType = function(event) {
      console.log('got event: ' + event.type);
    };

    var reader = new FileReader();
    reader.onloadstart = printEventType;
    reader.onprogress = printEventType;
    reader.onload = printEventType;
    reader.onloadend = printEventType;

    console.log('  starting read');
    reader.readAsDataURL(input.files[0]);
    console.log('leaving openFile()');
  };
</script>

Run

Results:

onloadstart / 'loadstart' event

listener(event : ProgressEvent) : undefined

Called after starting a read operation.

Example:

<input type='file' onchange='openFile(event)'>
<script>
  var openFile = function(event) {
    console.log('entering openFile()');
    var input = event.target;

    var printEventType = function(event) {
      console.log('got event: ' + event.type);
    };

    var reader = new FileReader();
    reader.onloadstart = printEventType;
    reader.onprogress = printEventType;
    reader.onload = printEventType;
    reader.onloadend = printEventType;

    console.log('  starting read');
    reader.readAsDataURL(input.files[0]);
    console.log('leaving openFile()');
  };
</script>

Run

Results:

onprogress / 'progress' event

listener(event : ProgressEvent) : undefined

Called during a read operation to report the current progress.

Example:

<input type='file' onchange='openFile(event)'>

<script>
  var openFile = function(event) {
    console.log('entering openFile()');
    var input = event.target;

    var printEventType = function(event) {
      console.log('got event: ' + event.type);
    };

    var reader = new FileReader();
    reader.onloadstart = printEventType;
    reader.onprogress = printEventType;
    reader.onload = printEventType;
    reader.onloadend = printEventType;

    console.log('  starting read');
    reader.readAsDataURL(input.files[0]);
    console.log('leaving openFile()');
  };
</script>

Run

Results:

FileReader Properties

DONE : Number readonly value = 2

The value returned by readyState after the load event has fired.

EMPTY : Number readonly value = 0

The value returned by readyState before the one of the read methods has been called.

LOADING : Number readonly value = 1

The value returned by readyState after one of the read methods has been called but before the load event has fired.

home license contribute feedback