CODEWITHSUNDEEP
javascript
AL-zami
AL-zami

Reputation: 9066

why i am getting the uncaught type error:can't find property of undefined

This is the first time I am working with JavaScript modules. I am trying to upload an image and show it in a div under 'id="imageholder"'.

The error is:

uncaught type error :can't find property 'fileread' of undefined

HTML:

<html>

<body>
  <div id='imageholder' style='width:100px;height:100px;border:1px solid black;position:relative;left:100px;'></div>
  <input type='file' id='up' />
  <script src='myscript.js'></script>
  <script>
    document.getElementById('up').addEventListener('change', FileUpload.files, false);
  </script>
</body>

</html>

Here is the myscript.js module file which should return the object called FileUpload. But error is saying it is undefined. Why it is undefined? It is long but it works when I don't use it like a module but all in a single file.

You can jump at the end and can see I am returning an object literal to FileUpload variable.

var FileUpload = (function(fileElement) {

  var imageholder = document.getElementById('imageholder');

  function getBLOBFileHeader(url, blob, callback, callbackTwo) {
    var fileReader = new FileReader();
    fileReader.onloadend = function(e) {
      var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
      var header = "";
      for (var i = 0; i < arr.length; i++) {

        header += arr[i].toString(16);
      }
      console.log(header);
      var imgtype = callback(url, header); // headerCallback

      callbackTwo(imgtype, blob)
    };

    fileReader.readAsArrayBuffer(blob);
  }

  function headerCallback(url, headerString) {

    var info = getHeaderInfo(url, headerString);
    return info;
  }

  function getTheJobDone(mimetype, blob) {

    var mimearray = ['image/png', 'image/jpeg', 'image/gif'];

    if (mimearray.indexOf(mimetype) != -1) {
      printImage(blob);
    } else {
      fileElement.value = '';
      while (imageholder.firstChild) {
        imageholder.removeChild(imageholder.firstChild);
      }
      // alert('you can not upload this file type');
    }
  }

  function remoteCallback(url, blob) {
    getBLOBFileHeader(url, blob, headerCallback, getTheJobDone);
  }

  function printImage(blob) {
    // Add this image to the document body for proof of GET success
    var fr = new FileReader();
    fr.onloadend = function(e) {
      var img = document.createElement('img');
      img.setAttribute('src', e.target.result);
      img.setAttribute('style', 'width:100%;height:100%;');
      imageholder.appendChild(img);
    };

    fr.readAsDataURL(blob);
  }

  function mimeType(headerString) {

    switch (headerString) {

      case "89504e47":
        type = "image/png";
        break;
      case "47494638":
        type = "image/gif";
        break;
      case "ffd8ffe0":
      case "ffd8ffe1":
      case "ffd8ffe2":
        type = "image/jpeg";
        break;
      default:
        type = "image/pjpeg";
        break;
    }

    return type;
  }

  function getHeaderInfo(url, headerString) {
    return (mimeType(headerString));
  }

  // Check for FileReader support
  function fileread(event) {

    if (window.FileReader && window.Blob) {


      /* Handle local files */
      var mimetype;
      var mimearray = ['image/png', 'image/jpeg', 'image/gif'];

      var file = event.target.files[0];

      if (mimearray.indexOf(file.type) === -1 || file.size >= 2 * 1024 * 1024) {
        while (imageholder.firstChild) {
          imageholder.removeChild(imageholder.firstChild);
        }
        fileElement.value = '';

        file = null;
        return false;

      } else {

        while (imageholder.firstChild) {
          imageholder.removeChild(imageholder.firstChild);
        }
        remoteCallback(file.name, file);
      }
    } else {
      // File and Blob are not supported
      console.log('file and blob is not supported');
    }
  }
  return {
    files: fileread
  };
}(document.getElementById('up')))

Upvotes: 0

Views: 109

Answers (1)

Ice Jovanoski
Ice Jovanoski

Reputation: 199

it's working right as you provided it jsfiddle.net/fredo5n8/ here is the proof.

Are you sure you did not forget to wipe cache in your browser? If that's the case, try to run the code in incognito (private) window.

EDIT:

<html>

<body>
  <div id='imageholder' style='width:100px;height:100px;border:1px solid black;position:relative;left:100px;'></div>
  <input type='file' id='up' />
  <script id='myscript' src='myscript.js'></script>
  <script>
	var script = document.getElementById('myscript');
	var attachInputEvents = function () {
        document.getElementById('up').addEventListener('change', FileUpload.files, false);
	}
	script.onload=attachInputEvents();
  </script>
</body>

</html>

This way, you'll wait for the srcript to load(I guess that's the problem, cause locally on my machine even with separate files, it worked good hosted on WAMP server)

Upvotes: 1

Related Questions