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,243
  • 6
  • 48
  • 103

2 Answers2

13

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
  • 49,297
  • 16
  • 112
  • 153
alessandrio
  • 4,282
  • 2
  • 29
  • 40
0

For this to work on Linux you can use,

<input type="file" id="folder" webkitdirectory="" directory="" multiple/>
Ishika Mishra
  • 1