7

I want the input type to be folder and not a single file. How can I select a folder instead of just a single file. Also how can I then access each file in that selected folder. I tried this to select a folder but didn't work. I am on chrome. 

 <input id="myInput" type="file" style={{visibility: 'hidden'}} webkitdirectory directory multiple/>

enter image description here

EdG
  • 2,121
  • 5
  • 40
  • 85

1 Answers1

12

You are looking for the files property, which returns a filelist. Use length to get the number of files then use a for statement to do the same for all files, increasing the count by 1 each time

var folder = document.getElementById("myInput");
folder.onchange=function(){
  var files = folder.files,
      len = files.length,
      i;
  for(i=0;i<len;i+=1){
    console.log(files[i]);
  }
}
 <input id="myInput" type="file" webkitdirectory directory multiple>
Mike 'Pomax' Kamermans
  • 44,582
  • 14
  • 95
  • 135
alessandrio
  • 4,142
  • 2
  • 30
  • 39