FileReader.readAsDataURL()The readAsDataURL method is used t

The readAsDataURL method is used to read the contents of the specified Blob or File. When the read operation is finished, the readyState becomes DONE, and the loadend is triggered. At that time, the result attribute contains the data as a data: URL representing the file's data as a base64 encoded string.

Note: The blob's result cannot be directly decoded as Base64 without first removing the Data-URL declaration preceding the Base64-encoded data. To retrieve only the Base64 encoded string, first remove data:*/*;base64, from the result.

Syntax

instanceOfFileReader.readAsDataURL(blob);

Parameters

blob

The Blob or File from which to read.

Example

HTML

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

JavaScript

function previewFile() {
  const preview = document.querySelector('img');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // convert image file to base64 string
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

Live Result

Example reading multiple files

HTML

<input id="browse" type="file" onchange="previewFiles()" multiple>
<div id="preview"></div>

JavaScript

function previewFiles() {

  var preview = document.querySelector('#preview');
  var files   = document.querySelector('input[type=file]').files;

  function readAndPreview(file) {

    // Make sure `file.name` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
      var reader = new FileReader();

      reader.addEventListener("load", function () {
        var image = new Image();
        image.height = 100;
        image.title = file.name;
        image.src = this.result;
        preview.appendChild( image );
      }, false);

      reader.readAsDataURL(file);
    }

  }

  if (files) {
    [].forEach.call(files, readAndPreview);
  }

}

Note: The FileReader() constructor was not supported by Internet Explorer for versions before 10. For a full compatibility code you can see our crossbrowser possible solution for image preview. See also this more powerful example.

Specifications

Specification	Status	Comment
File API The definition of 'FileReader' in that specification.	Working Draft	Initial definition

Browser compatibility

	Desktop	Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`readAsDataURL`	Full support 7	Full support 12	Full support 3.6	Full support 10	Full support 11	Full support 6	Full support Yes	Full support Yes	Full support 32	Full support 11	Full support 6.1	Full support Yes

Legend

Full support: Full support
See implementation notes.: See implementation notes.