javascript file reader on button click error: undefined refference

Question

I'm trying to get a local file from a system, I did some searching and came around a way of doing this, when I tried to implement it in my code, I got the error:

Uncaught TypeError: Cannot read property 'type' of undefined

document.getElementById('add-new-cat').addEventListener('click', handleFileSelect, false);

function handleFileSelect(evt) {
    var files = evt.target.files;

    if(files.type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function(theFile) {
            
        })(files);

        var catIMG = reader.readAsBinaryString(files);
        alert(catIMG);    
    }   
}

<input type="file" name="cat_path_orig" id="cat-path-orig">
<button class="btn btn-primary" id="add-new-cat">add</button>

I wouldn't know how to trigger the function with the file included, because I know it's looking for a value in the button that's being clicked

@epascarello I added a comment on the line where the error occurs — Grey, Nov 07 '16 at 14:54
@T.J.Crowder it's creating the same error for me, sorry, maybe I didn't translate it correctly? my errors show up in Dutch, maybe it's `Can't fetch the property type from an undefined refference or refference to an empty value`? — Grey, Nov 07 '16 at 14:57
@Luuk: In the question, you said `target`, and pointed to the line reading `evt.target.files`. — T.J. Crowder, Nov 07 '16 at 14:58
@T.J.Crowder oh, sorry, my bad, error is correct in the snippet — Grey, Nov 07 '16 at 14:59

score 2 · Accepted Answer · edited May 23 '17 at 12:13

The click event object doesn't have a files property. I think you're looking for the files property on the input type="file" object:

document.getElementById('add-new-cat').addEventListener('click', handleFileSelect, false);

function handleFileSelect(evt) {
  var files = document.getElementById("cat-path-orig").files;   // ****

  console.log("files.length: " + files.length);
  Array.prototype.forEach.call(files, function(file) {
    console.log(file.name + ": " + file.type);
  });
}

<input type="file" name="cat_path_orig" id="cat-path-orig">
<button class="btn btn-primary" id="add-new-cat">add</button>

A couple of other notes:

You'll want to look at the type property on each individual file (see the snippet above). In your example, there will be only one (because there's no multiple attribute on the input type="file"), so you could just use files[0] rather than the loop I've used above.
Your use of readAsBinaryString is also incorrect; here's an answer with a correct example.

perfect answer, again, sorry for the confusion, aparently dutch errors are quite different than english errors, I'll try my best to give correct english errors next time. — Grey, Nov 07 '16 at 15:06

javascript file reader on button click error: undefined refference

1 Answers1