We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

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 URL representing the file's data as a base64 encoded string.




The Blob or File from which to read.



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


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

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {

Live Result


Example reading multiple files


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


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



  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.


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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 3.6 (1.9.2)[1] 7 (Yes) 10[2] 12.02[3] 6.0
Feature Firefox Mobile (Gecko) Android Edge IE Mobile Opera Mobile Safari Mobile
Basic support 32 3 (Yes) 10 11.5 6.0

[1] Prior to Gecko 2.0 beta 7 (Firefox 4.0 beta 7), all Blob parameters below were File parameters; this has since been updated to match the specification correctly. Prior to Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10) the FileReader.error property returned a FileError object. This interface has been removed and FileReader.error is now returning the DOMError object as defined in the latest FileAPI draft.

[2] IE9 has a File API Lab.

[3] Opera has partial support in 11.1.

See also

Document Tags and Contributors

 Last updated by: erikadoyle,