onChange event not triggering

Question

I'm currently working within a third party software forms system that allows users to upload an image.

What I'm trying to achieve is on the upload area change is to grab the exif of the image and show an alert of its info. (with the plan being to grab the lat and lng once I can do that.)

I have the current JS inside my document ready

  $.getScript('http://WIN-VEQPNOG6JPR/Forms/js/exif.js', function() {
     document.getElementsByClassName("uploadArea").onchange = function(e) {
      EXIF.getData(e.target.files[0], function() {
          alert(EXIF.pretty(this));
      });
      }
   });

The structure for the generated form looks below. My first guess is that the area I've defined inside the form creator is wrong or I'm just not finding it. The file is nestled inside the tr class file then another td but I had tried to name this entire section uploadArea.

The image when uploaded looks like "<a class="ellipsis" title="img_1771.jpg">img_1771.jpg</a>"

Any ideas?

Error message:

Uncaught TypeError: Cannot read property 'exifdata' of undefined
    at imageHasData (exif.js?_=1496235241982:339)
    at Function.EXIF.getData (exif.js?_=1496235241982:936)
    at HTMLLIElement.document.getElementsByClassName.onchange (0:192)

Try changing `getElementsByClassName("uploadArea").onchange...` to `getElementsByClassName("uploadArea")[0].onchange...` since `getElementsByClassName` returns array. — abhishekkannojia, May 31 '17 at 11:55
@abhishekkannojia `getElementsByClassName` returns NodeList not an array — NightKn8, May 31 '17 at 11:58
@NightKn8 Yup, you are right, NodeList is an array like structure. For simplicity I just wrote array. — abhishekkannojia, May 31 '17 at 12:02
Yep, forgot I had do that. unfortunately the alert is still not triggering.Error now appears as "Uncaught TypeError: Cannot read property 'exifdata' of undefined". The html for the image looks like "img_1771.jpg" — Alex, May 31 '17 at 12:55

score 0 · Answer 1 · answered May 31 '17 at 12:11

0

Try this: document.getElementsByClassName("uploadArea")[0].onchange = function(e) {

Or Use Id as selector.

answered May 31 '17 at 12:11

Yash Kochar

461
6
15

yep that's what I thought would be the solution, unfortunatly we're now getting a Uncaught TypeError: Cannot read property 'exifdata' of undefined – Alex May 31 '17 at 12:58

onChange event not triggering

1 Answers1