title: document.querySelector(...) is null error
body: <p>For image upload in a cakephp project I used java-script.I added this js file in app\View\Layouts default.ctp </p>
  
  <p>js code </p>
  
  <pre><code>document.querySelector('input[type=file]').addEventListener('change', function(event){
  
    var files = event.target.files;
  
    for (var i = 0; i &lt; files.length; i++) {
  
      if (files[i].type.match(/image.*/)) {
  
          var reader = new FileReader();
          reader.onload = function (readerEvent) {
              var image = new Image();
              image.onload = function (imageEvent) {
  
                  var imageElement = document.createElement('div');
                  imageElement.classList.add('uploading');
                  imageElement.innerHTML = '&lt;span class="progress"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;';
                  var progressElement = imageElement.querySelector('span.progress span');
                  progressElement.style.width = 0;
                  document.querySelector('form div.photos').appendChild(imageElement);
  
  
                  var canvas = document.createElement('canvas'),
                      max_size = 1200,
                      width = image.width,
                      height = image.height;
                  if (width &gt; height) {
                      if (width &gt; max_size) {
                          height *= max_size / width;
                          width = max_size;
                      }
                  } else {
                      if (height &gt; max_size) {
                          width *= max_size / height;
                          height = max_size;
                      }
                  }
                  canvas.width = width;
                  canvas.height = height;
                  canvas.getContext('2d').drawImage(image, 0, 0, width, height);
  
                  var xhr = new XMLHttpRequest();
                  if (xhr.upload) {
  
                      // Update progress
                      xhr.upload.addEventListener('progress', function(event) {
                          var percent = parseInt(event.loaded / event.total * 100);
                          progressElement.style.width = percent+'%';
                      }, false);
  
  
                      xhr.onreadystatechange = function(event) {
                          if (xhr.readyState == 4) {
                              if (xhr.status == 200) {
  
                                  imageElement.classList.remove('uploading');
                                  imageElement.classList.add('uploaded');
                                  imageElement.style.backgroundImage = 'url('+xhr.responseText+')';
  
                                  console.log('Image uploaded: '+xhr.responseText);
  
                              } else {
                                  imageElement.parentNode.removeChild(imageElement);
                              }
                          }
                      }
  
                      xhr.open('post', 'process.php', true);
                      xhr.send(canvas.toDataURL('image/jpeg'));
  
                  }
  
              }
  
              image.src = readerEvent.target.result;
  
          }
          reader.readAsDataURL(files[i]);
      }
  
  }
  
  event.target.value = '';
  </code></pre>
  
  <p>I have checked there are no problem.</p>
  
  <p>now in add.ctp file I adder </p>
  
  <pre><code>&lt;input type="file" multiple /&gt;
  </code></pre>
  
  <p>In output I am seeing the file type field.Now when I clicked on this field and upload a image then mojila bug given me a error.That is </p>
  
  <p>document.querySelector(...) is null error </p>
  
  <p>I have no idea about this error.In here why saying queryselector is null?</p>