fileReader()

File Interface

A File object in JavaScript references an actual file in the local filesystem.

This File object inherits all properties and methods from the Blob class.

Although the File objects and Blob objects are different, they expose same methods and properties.

There is no way to create a File object, some JavaScript API return references File objects.

File object can be retrieved 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.

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>

Instance Properties

error : Error  readonly

The error encountered during load.

<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>

readyState : Number  readonly

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

<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>

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 loadevent fires.

<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>

Instance Methods

 

abort() : undefined

Stops the current read operation. 

readAsArrayBuffer(blob : Blob) : undefined

Begins reading from blob as an ArrayBuffer. The result will be stored on this.result after the 'load' event fires.

<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>

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.

<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>

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 ofencoding, see character sets.

<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>

Instance Events

 

onloadstart / 'loadstart'  event

listener(event : ProgressEvent) : undefined

Called after starting a read operation.

<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>

onprogress / 'progress'  event

listener(event : ProgressEvent) : undefined

Called during a read operation to report the current progress.

<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>

onload / 'load'  event

listener(event : ProgressEvent) : undefined

Called when a read operation successfully completes.

<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>

onabort / 'abort'  event

listener(event : ProgressEvent) : undefined

Called when the read is aborted with abort().

<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>

onerror / 'error'  event

listener(event : ProgressEvent) : undefined

Called when there is an error during the load.

<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>

onloadend / 'loadend'  event

listener(event : ProgressEvent) : undefined

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

<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>

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.