<!DOCTYPE html>
<html>
  <head>
    <title>QR Test</title>
  </head>
  <body>
    <input type="file" id="upload" multiple>

    <div id="preview">
    </div>

    <script type="text/javascript" src="../../dist/browser.js"></script>

    <script type="text/javascript">
      var upload = document.getElementById('upload');
      var preview = document.getElementById('preview');
      var qr = new QrCode();

      qr.callback = function(result) {
        var span = document.createElement('span');
        span.textContent = result;
        preview.appendChild(span);
      }

      upload.addEventListener('change', function() {
        for (var i = 0; i < this.files.length; i++) {
          var file = this.files[i];
          var imageType = /^image\//;
          
          if (!imageType.test(file.type)) {
            throw new Error('File type not valid');
          }

          // Read file
          var reader = new FileReader();
          reader.addEventListener('load', function() {
            // Show as preview image
            var img = document.createElement('img');
            img.src = this.result;
            preview.appendChild(img);

            // Analyse code
            qr.decode(this.result);
          }.bind(reader), false);
          reader.readAsDataURL(file);
        }
      }, false);
    </script>
  </body>
</html>
<!DOCTYPE html>
<html>
  <head>
    <title>QR Test</title>
    <style>
      #preview img {
        border: 1px solid black;
        float: left;
        margin: 0 1em 1em 0;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <h1>Simple browser demo using the FileReader API</h1>

    <h2>Upload file</h2>
    <input type="file" id="upload">

    <h2>Result</h2>
    <div id="preview"></div>

    <script type="text/javascript" src="../../dist/browser.js"></script>

    <script type="text/javascript">
      var upload = document.getElementById('upload');
      var preview = document.getElementById('preview');
      var qr = new QrCode();

      qr.callback = function(result) {
        var span = document.createElement('span');
        span.textContent = result;
        preview.appendChild(span);
      }

      upload.addEventListener('change', function() {
        for (var i = 0; i < this.files.length; i++) {
          var file = this.files[i];
          var imageType = /^image\//;
          
          if (!imageType.test(file.type)) {
            throw new Error('File type not valid');
          }

          // Read file
          var reader = new FileReader();
          reader.addEventListener('load', function() {
            // Show as preview image
            var img = document.createElement('img');
            img.src = this.result;
            preview.appendChild(img);

            // Analyse code
            qr.decode(this.result);
          }.bind(reader), false);
          reader.readAsDataURL(file);
        }
      }, false);
    </script>
  </body>
</html>
Improve demo page by adding text and optimizing styling
Improve demo page by adding text and optimizing styling
