CODEWITHSUNDEEP
javascripthtmljsfiddle
razor_ray
razor_ray

Reputation: 65

How to get text value of input type=file for multiple files?

I was hoping someone can update this JSFiddle code for me so that multiple input boxes appear for multiple selected images.

It works perfectly for for a Single image.

https://jsfiddle.net/WWNnV/609/ 

document.getElementById('upload').onchange = uploadOnChange;

function uploadOnChange() {
  var filename = this.value;
  var lastIndex = filename.lastIndexOf("\\");
  if (lastIndex >= 0) {
    filename = filename.substring(lastIndex + 1);
  }
  document.getElementById('filename').value = filename + "_date";
}
<input id="upload" type="file" multiple="multiple" />
<input id="filename" type="text" />

Any assistance will be appreciated.

Upvotes: 0

Views: 3922

Answers (2)

Bart
Bart

Reputation: 5203

@Anoop and @dandavis were right. Without jQuery and keeping the behaviour if it's one file then something like this:

document.getElementById('upload').onchange = uploadOnChange;

function uploadOnChange() {
  var text = this.value;
    if (this.files && this.files.length > 1) {
      var filenames = [];
      for(i=0; i<this.files.length; i++) {
      var filename = this.files[i].name;
      var lastIndex = filename.lastIndexOf("\\");
      if (lastIndex >= 0) {
        filename = filename.substring(lastIndex + 1);
      }
      filenames.push(filename);
    }
    text = filenames.join();
  }
  document.getElementById('filename').value = text;
}

JSFiddle: https://jsfiddle.net/bartvanderwal/Lego5bcp/4/

TODO: Create multiple input instead of concatenating filenames

Upvotes: 1

Anoop
Anoop

Reputation: 23208

Updated jsfiddle

Changed jQuery version.

Use this.files instead of this.value to get all files selected by user.

Upvotes: 0

Related Questions