CODEWITHSUNDEEP
javascriptjavascript-objectsfilereader
Lid
Lid

Reputation: 115

Can't access file name in File Reader Javascript

I am making an in browser image previewer. The image previews load fine, but the filename on this line repeats the first filename:

<div.innerHTML = "<img class='thumbnail' src='" + picfile.result + "'" +
"title='" + file.name + "'/>

I tried 

picfile.name 
file.name 
file[i].name 
files.name 
files[i].name

and none worked. Either it outputs undefined or breaks the whole script.

Here's the full code of the file reader.

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadimage ");
    filesInput.addEventListener("change ", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result ");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picreader = new FileReader();
        picreader.addEventListener("load ", function(event) {
          var picfile = event.target;
          var div = document.createElement("div ");
          div.innerHTML = "<img class='thumbnail' src='" + picfile.result + "' " +
            "title='" + file.name + "' /><br>";
          //div.innerHTML += picfile.name + '<br><span style="color:red">' + picfile.name.toLowerCase().replace(/[^\w\d\.]/gi, '') + '</span>';
          //filename output.insertBefore(div, null);
        });
        picreader.readAsDataURL(file);
      }
    });
  }
}
<input type="file" multiple id="uploadimage" class="file_input ">
<div id="result" class="uploadPreview "></div>

Upvotes: 0

Views: 230

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18975

You need change var file = files[i]; to let file = files[i]; inside the for loop.

More reference about JavaScript closure inside loops at

JavaScript closure inside loops – simple practical example

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadimage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        let file = files[i];
        if (!file.type.match('image'))
          continue;
        var picreader = new FileReader();
        picreader.addEventListener("load", function(event) {
          var picfile = event.target;
          var div = document.createElement("div");
          console.log(file.name);
          div.innerHTML = "<img class='thumbnail' src='" + picfile.result + "'" +
            "title='" + file.name + "'/><br>";
//div.innerHTML += picfile.name+'<br><span style="color:red">'+picfile.name.toLowerCase().replace(/[^\w\d\.]/gi, '')+'</span>'; //filename
          output.insertBefore(div, null);
        });        
        picreader.readAsDataURL(file);
      } 

    });
  }
}
<input type="file" multiple id="uploadimage" class="file_input">
<div id="result" class="uploadPreview"></div>
    <script>    
  
</script>

Upvotes: 2

Related Questions