HTML - Input File
Table of Contents
About
The input file 1) is an input of type file that permits to select files or directory and send them to the browser file system api
Example
The below examples are only HTML based and shows you how to style your input field.
To see example on how Javascript can take and handle the file chosen, see the page Javascript - Browser - File API
One file
<input type="file" />
Multiple Files
- The HTML
<input type="file" multiple />
- Result
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.
Example:
- The HTML
<input type="file" webkitdirectory />
Note that after choosing your directory, you will get the following warning dialog
- The result:
Disabled
<input type="file" disabled />
How to select only certain type of file
The accept attribute specifies the file types accepted (mime and/or file extension)
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">
- Result:
