Access element from JavaScript FileReader

Question

I am trying to read a file with in JavaScript with the File APIs.

I have the following code

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

    var fileBlobs = [];
    var reader = new FileReader();
    for (var i = 0, f; f = files[i]; i++) {
                    fileBlobs.push(reader.readAsBinaryString(f));
                    console.log(reader)
        }
      }

It logs me this object

FileReader {onloadend: null, onerror: null, onabort: null, onload: null, onprogress: null…}
error: null
onabort: null
onerror: null
onload: null
onloadend: null
onloadstart: null
onprogress: null
readyState: 2
result: "lat, lng, popup↵13.47262306516617336, 52.47896324136591062,    55↵13.40861762468653673, 52.54336741663770027,  44↵13.29255442595013115, 52.51117712705399754,  33↵13.38642907198692988, 52.44880630287082113,  22"
__proto__: FileReader

How can I access only the result part?

console.log(reader.result)

ilan berci
– ilan berci

2014-02-25 16:16:45 +00:00
Commented Feb 25, 2014 at 16:16 — ilan berci
– ilan berci, Commented Feb 25, 2014 at 16:16
This doesn't return anything

ustroetz
– ustroetz

2014-02-25 16:17:19 +00:00
Commented Feb 25, 2014 at 16:17 — ustroetz
– ustroetz, Commented Feb 25, 2014 at 16:17

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

NOT tested, but i think it should work :)

var file = document.getElementById('element-id').files;
var fr = new FileReader();
var storeBlobs = [];
fr.onload = function(e) {
  storeBlobs.push(e.target.result);
};
for(var i = 0, l = file.length; i < l; i++) {
  var content = fr.readAsText(file[i]);
}

File returns an array of objects which can be then manipulated trough FileReader object with onload method. If user loads more than one file we want to process all of it, and we will do that with for loop. I emphasize that this code is not tested, but it should work.

We can, if we assume that user will load one file only make file object to behave like this with replacing first line of code with this:

var file = document.getElementById('element-id').files[0];

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 24, 2015 at 3:07

Gaja

2312 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

meneldal Over a year ago

Please try to put comments or an explanation of why it works

Gaja Over a year ago

@meneldal This code is simple and self explanatory, but i guess that you're right, some people need more info, and thats ok. Thanks and i appreciate that you mention that.

meneldal Over a year ago

People who read your answer might not be proficient in whatever language is used so it's considered good practice to explain as much as possible.

gilly3 · Accepted Answer · 2014-02-25 17:09:53Z

0

You need to handle the load event of the FileReader. In the handler, access reader.result or this.result:

reader.onload = function() {
    var contents = this.result;
};

Reading the files is an asynchronous operation. So, you need to create a separate FileReader for each file. If you want to reuse the same FileReader, you can't use a for loop. Instead, you must wait to read the next file until after the current file is processed.

edited Feb 25, 2014 at 17:09

answered Feb 25, 2014 at 16:21

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Collectives™ on Stack Overflow

Access element from JavaScript FileReader

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related