title: While uploading the HTML file reading the image tag and fetching its dimension in angular js
body: <p>Here I'm uploading an HTML file. This HTML file contains an <code>&lt;img&gt;</code> tag.<br>
  E.G.:</p>
  
  <pre><code>&lt;img src="smiley.gif" alt="Smiley face" height="42" width="42"&gt;
  </code></pre>
  
  <p>It should read the image tag i.e <code>&lt;img&gt;</code> and tell respective image tag height and width i.e dimension</p>
  
  <p><a href="https://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files" rel="nofollow noreferrer">https://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-reading-files</a></p>
  
  <p>This is the link I followed for reading the content.</p>
  
  <pre><code>// HTML
  &lt;input type="file" id="files" name="file" /&gt;
  
  // JavaScript
  function readBlob(start, stop) {
      var reader = new FileReader();
      // If we use onloadend, we need to check the readyState.
      reader.onloadend = function (evt) {
          if (evt.target.readyState == FileReader.DONE) { // DONE == 2
              document.getElementById('byte_content').textContent = evt.target.result;
              document.getElementById('byte_range').textContent =
                      ['Read bytes: ', start + 1, ' - ', stop + 1,
                          ' of ', file.size, ' byte file'].join('');
          }
      };
      var blob = file.slice(start, stop + 1);
      reader.readAsBinaryString(blob);
  }
  
  var file = document.getElementById('files');
  
  document.querySelector('.readBytesButtons').addEventListener('click', function (evt) {
      if (evt.target.tagName.toLowerCase() == 'button') {
          var startByte = evt.target.getAttribute('data-startbyte');
          var endByte = evt.target.getAttribute('data-endbyte');
          readBlob(startByte, endByte);
      }
  }, false);
  </code></pre>