Javascript: How I make fileupload (not only image)?

Question

I made a file uploader that handles images, but it doesn't work well with files. For example: if I upload 3 xlsx/word or any files, these will have the same name for each.

My code is here:

<form>
  <input id="files" type="file" multiple="multiple">
  <div id="result"></div>
</form>

function handleFileSelect(event) {           
    if (window.File && window.FileList && window.FileReader) {
        var files = Array.from(event.target.files);
        var output = document.getElementById("result");
        output.innerHTML = '';
        console.log(files);
        for (var i = 0; i < files.length; i++) {
            var file = files[i];

            if(file.type.match('.php')){
                alert('ERROR');
                continue; 
            }             
            var picReader = new FileReader();
            picReader.addEventListener("load", function (event) {
                var picFile = event.target;
                var div = document.createElement("div");
                div.className = "col-6 col-sm-4 p-1";
                if (file.type.match('image')) {
                    div.innerHTML = "<img src='" + picFile.result + "'" + "title='" + file.name + "'/>";
                }else{
                    div.innerHTML = "<div class='upload-thumb'>" + file.name + "</div>";
                }
                output.insertBefore(div, null);
            });
            picReader.readAsDataURL(file);
        }
    } else {
        console.log("Your browser does not support File API");
    }
}

Link: https://jsfiddle.net/laszlooo/7c1Lv5x2/

Thank You!

I would like make an image and file uploader. If you try the code with 3 different name files (1.xlsx, 2.docx, 3.pdf, 4.jpg), when you will see my problem. I'm sorry if I misspelled it. — Laszlooo, Jan 28 '20 at 14:23
https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example <-- your problem — epascarello, Jan 28 '20 at 14:26

score 1 · Accepted Answer · answered Jan 28 '20 at 14:30

Problem you have is you have the infamous for loop bug. Where the reference to i updates as your loop executes. You can either use let instead of var or break out the part you read the file into a function so you do not have the issue.

function readFile(file, output) {
  var picReader = new FileReader();
  picReader.addEventListener("load", function(event) {
    var picFile = event.target;
    var div = document.createElement("div");
    div.className = "col-6 col-sm-4 p-1";
    if (file.type.match('image')) {
      div.innerHTML = "<img src='" + picFile.result + "'" + "title='" + file.name + "'/>";
    } else {
      div.innerHTML = "<div class='upload-thumb'>" + file.name + "</div>";
    }
    output.insertBefore(div, null);
  });
  picReader.readAsDataURL(file);
}


function handleFileSelect(event) {
  if (window.File && window.FileList && window.FileReader) {
    var files = Array.from(event.target.files);
    var output = document.getElementById("result");
    output.innerHTML = '';
    console.log(files);
    for (var i = 0; i < files.length; i++) { // <-- where the problem begins
      var file = files[i]; // <-- this is your problem with the reference

      if (file.type.match('.php')) {
        alert('ERROR');
        continue;
      }
      
      readFile(file, output) // <-- using a function gets around the reference issue

    }
  } else {
    console.log("Your browser does not support File API");
  }
}

document.querySelector("input").addEventListener("change", handleFileSelect)

<form>
  <input id="files" type="file" multiple="multiple">
  <div id="result"></div>
</form>

Javascript: How I make fileupload (not only image)?

1 Answers1