CODEWITHSUNDEEP
javascriptjquery
user4082764
user4082764

Reputation:

Uncaught TypeError: Cannot read property 'addEventListener' of null error for image upload

Hi friends i am getting this error in following code:

Uncaught TypeError: Cannot read property 'addEventListener' of null on line 11

The line 11 is:

fileDiv.addEventListener("click",function(e){
  $(fileInput).show().focus().click().hide();
  e.preventDefault();
},false)

This is input file:

<input type="file" class="imageUploadBtn" id="upload-image" name="fotograflar[]" multiple="multiple">

In this code error on line 5:

console.log(fileInput);
fileInput.addEventListener("change",function(e){
  var files = this.files
  showThumbnail(files)
},false)

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!!

$(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<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)
        }
      }
    }
              });
               });

Upvotes: 1

Views: 24713

Answers (3)

Abhishake Gupta
Abhishake Gupta

Reputation: 3170

We should also check where are we calling the javascript file in header or in the end of the <body>

Upvotes: 1

TechMaze
TechMaze

Reputation: 477

Your code is looking for and element with ID 'upload':

'var fileDiv = document.getElementById("upload");'

but the actual id is 'upload-image'

<input type="file" class="imageUploadBtn" id="upload-image" name="fotograflar[]" multiple="multiple">

Change your this line to:

var fileDiv = document.getElementById("upload-image");

If it is working on localhost, then try this: 1. open your page in chrome browser 2. hit F12 3. on console of developer tool, type document.getElementById("upload"); 4. Whatever is the output just move your mouse cursor on that to see where is that element on UI 5. Repeat same with non localhost environment and verify/debug where is the problem.

This is to simple a problem and I am sure if you fiddle with debugger you can solve it yourself easily.

Upvotes: 2

Alastair McBain
Alastair McBain

Reputation: 399

getElementById returns null when it can't find the element you're looking for. Trying to call functions on null will throw an error like the above. It seems just from the above that you do not have element with the ID upload.

Upvotes: 0

Related Questions