HTML - Input File

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:

Documentation / Reference


Powered by ComboStrap