1

Hi I have a input file which takes multiple files and the tag is given the Id = fileToUpload and here goes the code:

var input = document.getElementById('filesToUpload');
for (var x = 0; x < input.files.length; x++) {
    oFReader = new FileReader();
    oFReader.readAsDataURL(input.files[x]);
    oFReader.onload = function (oFREvent) {
         imageSrc = oFREvent.target.result;
         console.log("source:" +imageSrc);
         name = oFREvent.target.name;
         console.log("name:" +name);
     };
}

Here I am able to get the source of the image but I am not able to get the name of the file which is selected for uploading. I am doing the right way or this is not a right way to get a file name.

Improve this question
0

3 Answers 3

Reset to default
1

You want to get the name from the original filelist, not the target of the FileReader's onload event. The FileReader object doesn't have a name property and the target of the onload event is the FileReader, not the file.

EDIT

Getting the name file loaded into the FileReader turns out to be kinda tricky! I came up with two ways which you can see in this fiddle.

First way just seems plain wrong - add a name property to your new FileReader() instance and then access it via evt.target. Works in FF and Chrome anyway.

var input = document.getElementById('filesToUpload');
    input.addEventListener("change", soWrongButItSeemsToWork, false);

function soWrongButItSeemsToWork () {
    var filelist = this.files;

    for (var x = 0; x < filelist.length; x++) {
        oFReader = new FileReader();
        oFReader.name = filelist[x].name;
        console.log("name outside:", oFReader.name);
        oFReader.onload = function (oFREvent ) {
            imageSrc = oFREvent.target.result;
            console.log('name inside:', oFREvent.target.name);
            img = document.createElement("img");
            img.src = imageSrc;
            document.body.appendChild(img);
         };

        oFReader.readAsDataURL(filelist[x]);

    }
}

Use a closure as suggested by http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html (at the bottom). Something like:

var input2 = document.getElementById('fileinput');
    input2.addEventListener("change", readMultipleFiles, false);

function readMultipleFiles(evt) {
    //Retrieve all the files from the FileList object
    var files = evt.target.files; 

    if (files) {
        for (var i=0, f; f=files[i]; i++) {
            var r = new FileReader();
            r.onload = (function(f) {

                return function(e) { // WOOHOO!
                  var dataUri = e.target.result,
                      img     = document.createElement("img");

                      img.src = dataUri;
                      document.body.appendChild(img);

                      console.log( "Got the file.n" 
                          +"name: " + f.name + "\n"
                          +"type: " + f.type + "\n"
                          +"size: " + f.size + " bytes\n"

                    ); 
                };
            })(f);

            r.readAsDataURL(f);
        }   
    } else {
          alert("Failed to load files"); 
    }
}

Good article on MDN here https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

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

4 Comments

Yeah this I tried if I try to print the name inside the oFReader.onload = function (oFREvent) { console.log("name:", name); } then I am getting only the last filename instead of the particular file name. \n For example I have 3 files 1.jpg, 2.jpg, 3.jpg then 3.jpg is getting printed three times in place of other file names.
@user2823355 gotcha. Updated by answer with new code and a fiddle.
The second solution you have given works fine I guess but I havent tried it as I was not in the senario of defining an EventListener
@user2823355 huh? oFReader.onload = function (oFREvent){} is defining an event listener. "Listen for the onload event on the oFReader instance of the FileReader object and execute this anonymous function." Maybe I'm misunderstanding you.
0

Try this code work perfectly:

var input = document.getElementById('filesToUpload');
for (var x = 0; x < input.files.length; x++) {
    oFReader = new FileReader();
    oFReader.readAsDataURL(input.files[x]);
    oFReader.onload = function (oFREvent) {
         imageSrc = oFREvent.target.result;
         console.log("source:" +imageSrc);
         name = imageSrc.replace(/^.*[\\\/]/, '');
         console.log("name:" +name);
     };
}
Improve this answer

3 Comments

No this is not working on what basis are you trying to get get file name from imageSource here when we don't have image name in the imageSource.
what you get from imageSrc? url or any other.
please print sample for imageSrc
0

I have did a work around for this and here is the example given:

var input = document.getElementById('filesToUpload');
for (var x = 0; x < input.files.length; x++) {
oFReader = new FileReader();
oFReader.readAsDataURL(input.files[x]);
var index = 0;
oFReader.onload = function (oFREvent) {
     imageSrc = oFREvent.target.result;
     console.log("source:" +imageSrc);
     //name = oFREvent.target.name;
     name = input.files[index++].name;
     console.log("name:" +name);
 };

}

Each time I iterate over the reader object then I increment the index so that it indexs to the next fine in the array.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.