HTML5: File Input with Folder Selection

In this tutorial, I would like to show you, how to implement an HTML 5 file input in which you can select an entire folder instead of some single individual files.

First, we have a look at the required HTML. We are using a normal input field with the type "file". In order to be able to select multiple files at once, we have added the attribute "multiple". Additionally, we have added an onchange event to read and process the folder respectively the files from the selected folder with JavaScript. We will look at the JavaScript code in the next section.

<input type="file" onchange="selectFolder(event);" multiple="multiple" 
  webkitdirectory mozdirectory msdirectory odirectory directory>

For making a directory input out of the usual file input, additionally, we have specified the attributes webkitdirectory, mozdirectory, msdirectory, odirectory and directory. Actually, specifying only the attribute  "directory" should be enough at that point, but because we also want to support some older browsers, we have also added the browser specific attributes with the prefix webkit-, moz-, ms- and o-. If the browser is supporting one of those attributes, instead of the file dialog, now the directory dialog of the system is displayed.

How to access the selected Folders via JavaScript

Last, I also want to show you, how to work with the selected folder and how you are able to access the files of the folder which the user has selected.

For this, we are using the following JavaScript, which will be automatically executed when changing the folder selection, because we have assigned the function to the onchange event of the input field.

function selectFolder(e) {
   for (var i = 0; i < e.target.files.length; i++) {
      var s = e.target.files[i].name + '\n';
      s += e.target.files[i].size + ' Bytes\n';
      s += e.target.files[i].type;
      alert(s);
   }
}

We get all files located in the selected folder in the array e.target.files.

In the code above, we are just looping through this array (the number of files is e.target.files.length) in order to show some information about the files such as name, size and type using an alert.

Browser Support

This input type is supported by the browsers Google Chrome (from version 30), Microsoft Edge (from version 14), Mozilla Firefox (from version 50) and Opera (from version 17). In contrast, the selection of folders is not supported by the Internet Explorer and many mobile browsers. This is also due to the fact that many mobile systems do not allow folders to be selected in their system at all.