title: Uncaught DOMException: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.(…)
body: <p>I am working on this for the past 6 hours, and I am unable to figure this out. </p>
  
  <p>I am trying to create a website, in which I choose a folder of images and I show them in my document. I get the first image to show, and then I get the following error in my console. </p>
  
  <p><strong>Uncaught DOMException: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.(…)</strong></p>
  
  <p>I believe the issue is caused due to my for loop because the filereader is asynchronous. But I need to loop through the whole array for this, so what am I doing wrong?</p>
  
  <p>I load the files ("will check to make sure I get only images later"), into an array, and then I read each file one at a time.
   Before breaking down my code to functions I did everything in a single function and it works! I included the HTML + the original and current JS code. <strong>Thank you for taking the time to see this.</strong></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Tiled Image Viewer&lt;/title&gt;
      &lt;script src="js/tiv.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div id="main-wrap"&gt;
        &lt;form name="uploadForm"&gt;
  
          &lt;input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
                     onchange="readAndShowFiles();" multiple/&gt;
  
          &lt;span id="list"&gt;&lt;/span&gt;
        &lt;/form&gt;
  
      &lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript Original: </p>
  
  <pre><code>function readAndShowFiles() {
   var files = document.getElementById("images").files;
   for (var i = 0; i &lt; files.length; i++) {
     var file = files[i];
     // Have to check that this is an image though
     // using the file.name TODO
     var reader = new FileReader();
     // Closure to capture the file information.
     reader.onload = (function(file) {
       return function(e) {
         // Render thumbnail.
         var span = document.createElement('span');
         span.innerHTML = ['&lt;img src="', e.target.result,
         '" title="', escape(file.name), '"&gt;'].join('');
         document.getElementById('list').insertBefore(span, null);
       };
     })(file);
     // Read in the image file as a data URL.
     reader.readAsDataURL(file);
   }
  }
  </code></pre>
  
  <p>Javascript Current:</p>
  
  <pre><code>function readAndShowFiles() {
      console.log("Checkpoint2"); //test
      var tiv = new tivAPI();
      var array = tiv.getLoadedImages();
      tiv.showLoadedImages(array);
  }
  
  function tivAPI(){
    var imagesarray = new Array();
  
  
      return{
        loadImages: function(){
          console.log("Loading Files"); //test
          var files = document.getElementById("images").files;
          for (var i = 0; i &lt; files.length; i++) {
            var file = files[i];
            // Have to check that this is an image though
            // using the file.name TODO
          }
          console.log(files.length); //test
          return files;
        },
        getLoadedImages: function(){
          imagesarray = this.loadImages();
          console.log("Returning Files"); //test
          console.log(imagesarray.length);
          return imagesarray;
        },
        showLoadedImages: function(elem){
          console.log("Showing Files"); //test
          var files = elem;
          var reader = new FileReader();
          // Closure to capture the file information.
          for (var i = 0; i &lt; files.length; i++) {
            var file = files[i];
            reader.onload = (function(file) {
              return function(e) {
                // Render thumbnail.
                var span = document.createElement('span');
                 span.innerHTML = ['&lt;img src="', e.target.result,
                '" title="', escape(file.name), '"&gt;'].join('');
                document.getElementById('list').insertBefore(span, null);
              };
  
            })(file);
          // Read in the image file as a data URL.
          reader.readAsDataURL(file);
          }
        }
      };
    }
  </code></pre>