title: Javascript Exif information only showing after the first click of image in html page
body: <p>Ok, my problem is pretty specific, but I can't find a solution anywhere.</p>
  
  <p>I am making a site, in which you upload a folder of images using the FileReader() API, and they are displayed. When you click on an image, it gets maximized and, using the EXIF.pretty() from the exif-js library, you display the Exif information, along with a google map. I have a "Go Back" button that takes you back to the collection</p>
  
  <p>So, the problem is, when I click a picture the first time, it shows no EXif information, but the google map can be displayed. The second time onwards, it displays everything correctly. This happens to every picture.</p>
  
  <p>This is the part of the javascript where I write the EXIF to the html: </p>
  
  <pre><code>function writeEXIFData(image, EXIFelem) {
      var allMetaData = EXIF.pretty(image);
      console.log(image);
      var allMetaDataAside = document.getElementById(EXIFelem);
      var ExifData = document.createElement("div");
      ExifData.id = "EXIFData";
      allMetaDataAside.appendChild(ExifData);
      if (allMetaData !== "") {
          ExifData.innerHTML = allMetaData;
      } else {
          ExifData.innerHTML = "NO DATA AVAILABLE";
      }
  }
  </code></pre>
  
  <p>There are 2 pictures of what the File looks as an output in console the first and second time.<a href="https://i.stack.imgur.com/6LFXN.png" rel="nofollow noreferrer">The second one appears to have more information.</a> <a href="https://i.stack.imgur.com/GHNJJ.png" rel="nofollow noreferrer">But they are the same exact files</a></p>
  
  <p>So, why is this happening? I am clicking the same exact images from the same array.</p>
  
  <p>Thank you.</p>
  
  <p>Edit: Michael Camden: If I understood what you are asking.
  This is inside my API in a return block:</p>
  
  <pre><code>showImage: function (index, elem, EXIFelem) {
      document.getElementById(elem).innerHTML = "";
      var file = loadedImages[index];
      var reader = new FileReader();
      reader.onload = (function (file) {
          return function (event) {
              // Render thumbnail.
              var div = document.createElement("div");
              div.className = "maximize";
              div.innerHTML = ['&lt;img src="', event.target.result, '" title="', encodeURI(file.name), '"&gt;'].join('');
              document.getElementById(elem).insertBefore(div, null);
          };
      }(file));
          // Read in the image file as a data URL.
          reader.readAsDataURL(file);
          TIV3446.makePreviousbtn(elem, EXIFelem);
          TIV3446.showImageDetailedExifInfo(index, EXIFelem);
          TIV3446.showImageDetailedExifWithMap(index, EXIFelem);
  }
  
  showImageDetailedExifInfo: function (index, EXIFelem) {
      EXIF.getData(loadedImages[index], writeEXIFData(loadedImages[index], EXIFelem));
  }
  </code></pre>
  
  <p>Edit2: The code I sent is probably not what you were asking. There is also this:</p>
  
  <pre><code>    var i;
      var file;
      var reader;
      for (i = 0; i &lt; loadedImages.length; i += 1) {
          file = loadedImages[i];
          reader = new FileReader();
          // Closure to capture the file information.
          reader.onload = (function (file, index) {
              return function (event) {
                  // Render thumbnail.
                  var div = document.createElement("div");
                  div.className = "tile";
                  div.addEventListener("click", function () {TIV3446.showImage(index, elem, EXIFelem);});
                  div.innerHTML = ['&lt;img src="', event.target.result, '" title="', encodeURI(file.name), '"&gt;', '&lt;div class="info"&gt;', encodeURI(file.name).slice(0, -4)].join('');
                  document.getElementById(elem).insertBefore(div, null);
              };
          }(file, i));
          // Read in the image file as a data URL.
          reader.readAsDataURL(file);
      }
  </code></pre>