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 file's result results in a string that cannot be directly decoded as Base64. To retrieve only the Base64 encoded string, you must remove data:*/*;base64, from the 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 `` matches our extensions criteria
    if ( /\.(jpe?g|png|gif)$/i.test( ) {
      var reader = new FileReader();

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



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

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 7Edge Full support YesFirefox Full support 3.6IE Full support 10Opera Full support 11Safari Full support 6WebView Android ? Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 32Opera Android Full support 11Safari iOS Full support 6.1Samsung Internet Android ?


Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Last updated by: mfuji09,