Get file name in javascript

Question

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.

Answer 1

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.

Answer 2

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

Answer 3

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);
     };
}