HTML5 Javascript FileReader - extract data into parent function

Question

Looking at HTML FileReader. I am struggling to extract the data from the fileReader. All examples I see use the data directly from the inbuilt FileReader function. I'm trying to pull the data out of the filereader and store it in the parent 'class'. However I have been unsuccessful.

function constructTS(name){
    // Variables 
    this.name = name;
    this.csv = "";

}

constructTS.prototype.load = function(files){

    if (window.FileReader) {
        // FileReader are supported.
        var reader = new FileReader();               //Exe#1

        reader.onload = function(e){                 //Exe#2

            var csv = reader.result                  //Exe#5
            var allTextLines = csv.split(/\r\n|\n/); //Exe#6
            var lines = [];                          //Exe#7
            while (allTextLines.length) {            
                lines.push(allTextLines.shift().split(','));
            };                                       //Exe#8
            this.lines = lines;                      //Exe#9


            };

        var x = reader.readAsText(files);            //Exe#3

    } else {
        alert('FileReader yeah.. browser issues.');
    };

    alert(reader.lines[0]);                          //Exe#4
};

The this in this.lines = lines; refers to the Filereader class and not the constructTS class. Thus the information is not stored. I also find it a little strange how it runs the entire function and then only reads in the file afterwards. I guess that is helpful for web functionality. Any idea how I can load the data into the class?

krampstudio · Accepted Answer · 2016-09-13 07:54:25Z

In JavaScript this references the closure context: this in the reader.onload is the context of the onload method, so reader.

In your situation :

function constructTS(name){
    // Variables 
    this.name = name;
    this.csv = "";

}

constructTS.prototype.load = function(files){
    var that = this; //keep a reference on the current context
    if (window.FileReader) {
        // FileReader are supported.
        var reader = new FileReader();               //Exe#1

        reader.onload = function(e){                 //Exe#2

            var csv = reader.result                  //Exe#5
            var allTextLines = csv.split(/\r\n|\n/); //Exe#6
            var lines = [];                          //Exe#7
            while (allTextLines.length) {            
                lines.push(allTextLines.shift().split(','));
            };                                       //Exe#8
            that.lines = lines;                      //Exe#9
        };

        var x = reader.readAsText(files);            //Exe#3

    } else {
        alert('FileReader yeah.. browser issues.');
    };

    alert(reader.lines[0]);                          //Exe#4
};

To understand this in JavaScript, there's a lot of resources, like https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Hugo G · Accepted Answer · 2016-09-13 07:55:25Z

1

this refers to your unnamed callback function here. Try this pattern:

var outer = this;
reader.onload = function(e){
    ...
    outer.lines = lines;
}
// you can use outer.lines or this.lines here now (they're the same)

answered Sep 13, 2016 at 7:55

Hugo G

16.7k9 gold badges62 silver badges82 bronze badges

Collectives™ on Stack Overflow

HTML5 Javascript FileReader - extract data into parent function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related