0

I use Chrome 12 on Mac OS X and I've included jQuery 1.6.1 within the document.

I try to read a File with the following code, an error seams to occur while reading the file, so this.error.onerror() is called, but the FileReader-Object this.reader doesn't exists anymore and I can't get the error. I'm also not sure why the error occurs, it's a regular text document I want to read.

function FileHandler(files, action) {
    console.log('FileHandler called.');

    this.files = files;
    this.reader = new FileReader();
    this.action = action;

    this.handle = function() {
        console.log('FileHandler.handle called.');

        for (var i = 0; i < this.files.length; i++) {
            this.reader.readAsDataURL(files[i]);
        }
    }

    this.upload = function() {
        console.log('FileHandler.upload called.');
        console.log(this.reader);

        data = {
            content: this.reader.result
        }

        console.log(data);
    }

    this.error = function() {
        console.log('An error occurred while reading a file.');
        console.log(this.reader.error);
    }

    this.reader.onload = this.upload;
    this.reader.onerror = this.error;
}

This code creates the following console output: http://cl.ly/0j1m3j0o3s071Y1K3A25

Claudio Albertin
  • 2,076
  • 4
  • 18
  • 20
  • If you host your files on a web server, do you have the same issue? If you use FF instead of Chrome, do you have the same issue? If not, then you may be running into Chrome's same-origin policy. See the answer and comments here: http://stackoverflow.com/questions/4100927/chrome-filereader/4101266#comment10572715_4101266 – james.garriss Dec 16 '11 at 15:20

2 Answers2

0

This should be the correct way to do it:

reader.onerror = function(event) {
    console.error("File could not be read: " + event.target.error);
};
Nuno Pinto
  • 15
  • 7
0

Inside .onerror, the this is not the same as outside because it's a new function (with a new scope).

Keep track of the this by setting it statically like this:

var _this = this; // _this won't change
this.reader.onerror = function() {
    console.log('An error occurred while reading a file.');
    console.log(_this.reader.error);
}
pimvdb
  • 151,816
  • 78
  • 307
  • 352
  • I've updated the code in a way I think it should work (at least it works with this.upload). But the error still occurs and the console output is the same. – Claudio Albertin Jun 20 '11 at 20:21
  • Are you sure it is `undefined`? Note that the `_this` should be defined outside `.error`. – pimvdb Jun 20 '11 at 20:24
  • What exactly do you mean with 'multiple objects' please? – pimvdb Jun 20 '11 at 20:29
  • okay, but I'll have to find a way to have the option to create multiple objects. I have to play with the object without set the it as static. Is there a nice way to do this? With multiple objects I mean the option to create n objects of this "class" with different "instance variables". – Claudio Albertin Jun 20 '11 at 20:34
  • You could instead do `this.reader.onerror = this.error.bind(this)` and use `this` again (drop `_this`). – pimvdb Jun 20 '11 at 20:34
  • This works, thank you very much. Now I'm able to get the error number. "SECURITY_ERR"... But that's another problem, isn't it? – Claudio Albertin Jun 20 '11 at 20:37
  • I've no clue as to what's the reason behind `SECURITY_ERR` - is it because of the `bind`? I guess it is a file reading error: https://developer.mozilla.org/en/DOM/FileError. – pimvdb Jun 20 '11 at 20:39
  • I had an error before I used .bind() and I think it's still the same error. But I really don't have any idea why a SERCURITY_ERR occurs. Should I open a ask it as a new question because it hasn't (not directly) something to do with the undefined object? – Claudio Albertin Jun 20 '11 at 20:53
  • That's a good idea (just as a quick note, can you open the file in Notepad?). – pimvdb Jun 20 '11 at 21:00