document.querySelector(...) is null error

Question

For image upload in a cakephp project I used java-script.I added this js file in app\View\Layouts default.ctp

js code

document.querySelector('input[type=file]').addEventListener('change', function(event){    var files = event.target.files;    for (var i = 0; i < 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 = '<span class="progress"><span></span></span>';                 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 > height) {                     if (width > max_size) {                         height *= max_size / width;                         width = max_size;                     }                 } else {                     if (height > 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 = ''; 

I have checked there are no problem.

now in add.ctp file I adder

<input type="file" multiple /> 

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

document.querySelector(...) is null error

I have no idea about this error.In here why saying queryselector is null?

Answer 1

document.querySelector() behaves similarly to the jQuery.(document).ready() method. When the DOM is ready, the selector returns the object.

I would suggest you call all JS script bottom of the page.