title: HTML5: Input Type File - read image data
body: <p>I'd like to read "width" and "heigth" of an image file that I pick with HTML input element (type is file). My problem is, that I get the values 0 / 0 when I pick an image file for the first time. When I pick a second image file (doesn't matter which one), I get the correct values for width and height for the first/previous image. </p>
  
  <p>How can I make sure to instantly get width and heigth of the image file I picked?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
   &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;input type="file" id="fileInput" accept="image/*" onchange="handleFiles(this.files)"&gt;
   
   &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script&gt;
    var img = new Image();
    //set input back to default on refresh:
    $('#fileInput')[0].value = "";
    
    function handleFiles(fileList) {
     if (!fileList.length) {
      console.log("No files selected!");
     } else {
      console.log(fileList.length);
      console.log(fileList[0]);
      
      img.src = window.URL.createObjectURL(fileList[0]);
      
      console.log("src: " + img.src);
      console.log("width: " + img.width + " / height: " + img.height);
      
      img.onload = function() {
       window.URL.revokeObjectURL(this.src);
      }
     }
    }
   &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>