CODEWITHSUNDEEP
javascriptfilereader
CromeX
CromeX

Reputation: 445

Javascript FileReader in a storing to memory - parameter 1 is not of type 'Blob'

ok so I have read a number of articles and tried a number of approaches. Neither of them work.I am trying to build the File Reader into my code and I just get error after error, over and over again. Note: This is a reduced version of the code. I have also tried about 10 different ways, neither successful, hence the question. 

function init(){
    // start the constructor
    constructTable = new constructTableS("ConstructionTable");
};

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

constructTableS.prototype.load = function(files){
    if (window.FileReader) {
        // FileReader is supported.
        var reader = new FileReader();

        reader.onload = function(e){
            //Tried this as well : var csv = event.target.result}; 
            this.csv = reader.result};

        var x = reader.readAsText(files);



    } else {
        alert('FileReader are not supported in this browser.');
    };

The aim is to begin the function with the body initialization. 

<body onload="init()">

Then call the load function of the "class" and send it the data from the file? 

<input type="file" id="csvFileInput" onchange="constructTable.load(this.files)" accept=".csv">

The error that I get is: parameter 1 is not of type 'Blob'. This comes from this line var x = reader.readAsText(files);

what I'm trying to do is load the data into a variable not an innerHTML slot. I've read numerous examples such as these. parameter is not of type 'Blob'

As soon as the event is called, it either won't recognize my class and ignore any functions in the class, thus I can't store the data. Or it just returns, not of type blob.

I have taken the example from here: http://mounirmesselmeni.github.io/2012/11/20/reading-csv-file-with-javascript-and-html5-file-api/

That works but it it doesn't read the code into a variable in a class that I can call when I need it.

Upvotes: 0

Views: 745

Answers (1)

Trash Can
Trash Can

Reputation: 6824

<input type="file" id="csvFileInput" onchange="constructTable.load(this.files)" accept=".csv"> The this.files returns an array of uploaded files, to read one file at a time, use a loop

for (var i = 0; i < files.length; i++) {
    //your logic goes here
}

The this refers to the current HTMLElement which is the file input element and this element has a property called files which is an array of files that were selected.

Or if you only allow users to upload one file at a time, change this.files to this.files[0]

Upvotes: 3

Related Questions