<input type="file" />
- The HTML
<input type="file" multiple />
All files under a directory
When using the webkitdirectory attribute (supported on all browsers 2)), you can upload all files present under a directory and its children.
- The HTML
<input type="file" webkitdirectory />
Note that after choosing your directory, you will get the following warning dialog
- The result:
<input type="file" disabled />
How to select only certain type of file
Example for image and text file
<input type="file" accept="image/*,.txt"/>
How to change the description of the button
Changing the description of the input file cannot be done via a standard attribute.
It's also not possible to disable the native default browser rendering of a input file (the appearance css property is not working).
The trick is to create a hidden input file with a visible label that refers to it via the for attributes.
- The html
<label for="my-input-file-id" class="btn btn-primary">Select an Image</label> <input id="my-input-file-id" style="visibility:hidden;" type="file">