title: Uncaught TypeError: Cannot read property 'addEventListener' of null error for image upload
body: <p>Hi friends i am getting this error in following code:</p>
  
  <p><code>Uncaught TypeError: Cannot read property 'addEventListener' of null</code>   on line 11</p>
  
  <p>The line 11 is:</p>
  
  <pre><code>fileDiv.addEventListener("click",function(e){
    $(fileInput).show().focus().click().hide();
    e.preventDefault();
  },false)
  </code></pre>
  
  <p>This is input file:</p>
  
  <pre><code>&lt;input type="file" class="imageUploadBtn" id="upload-image" name="fotograflar[]" multiple="multiple"&gt;
  </code></pre>
  
  <p>In this code error on line 5:</p>
  
  <pre><code>console.log(fileInput);
  fileInput.addEventListener("change",function(e){
    var files = this.files
    showThumbnail(files)
  },false)
  </code></pre>
  
  <p>What is that error? Anyone can help me in this regard ? I am using this code for image upload but this error will not allow me!!</p>
  
  <pre><code>$(document).ready(function() 
      {
      jQuery(function($){
      var fileDiv = document.getElementById("upload");
      var fileInput = document.getElementById("upload-image");
      console.log(fileInput);
      fileInput.addEventListener("change",function(e){
        var files = this.files
        showThumbnail(files)
      },false)
  
      fileDiv.addEventListener("click",function(e){
        $(fileInput).show().focus().click().hide();
        e.preventDefault();
      },false)
  
      fileDiv.addEventListener("dragenter",function(e){
        e.stopPropagation();
        e.preventDefault();
      },false);
  
      fileDiv.addEventListener("dragover",function(e){
        e.stopPropagation();
        e.preventDefault();
      },false);
  
      fileDiv.addEventListener("drop",function(e){
        e.stopPropagation();
        e.preventDefault();
  
        var dt = e.dataTransfer;
        var files = dt.files;
  
        showThumbnail(files)
      },false);
  
      function showThumbnail(files){
        for(var i=0;i&lt;files.length;i++){
          var file = files[i]
          var imageType = /image.*/
          if(!file.type.match(imageType)){
            console.log("Not an Image");
            continue;
          }
  
          var image = document.createElement("img");
          // image.classList.add("")
          var thumbnail = document.getElementById("thumbnail");
          image.file = file;
          thumbnail.appendChild(image)
  
          var reader = new FileReader()
          reader.onload = (function(aImg){
            return function(e){
              aImg.src = e.target.result;
            };
          }(image))
          var ret = reader.readAsDataURL(file);
          var canvas = document.createElement("canvas");
          ctx = canvas.getContext("2d");
          image.onload= function(){
            ctx.drawImage(image,100,100)
          }
        }
      }
                });
                 });
  </code></pre>