Can't access file name in File Reader Javascript

Question

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>

Note that you could do it all synchronously and avoid the closure problem altogether with saving memory and CPU process by using URL.createObjectURL(file) to generate an URL pointing to your file. jsfiddle.net/z0f8gxsk — Kaiido
– Kaiido, Commented Jun 28, 2019 at 2:42

Hien Nguyen · Accepted Answer · 2019-06-28 03:41:09Z

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>

Collectives™ on Stack Overflow

Can't access file name in File Reader Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related