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

Html Input File Multiple 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





Discover More
Browser / Web Api - File (Blob)

A file in the Javascript Browser Api (WebApi) is represented by a File object . The file object is a blob object that adds support for files on the user's system. When you use a HTML input...
HTML - Input Element

An inputinput element of a form control that permits to define a scalar value inputFull list Ref Doc The type attribute defined: the default behavior the design of the element. and the...
Html Input File Multiple Warning Dialog
Javascript - Browser - File API

The file api is a browser javascript api that allows file system operation in the browser. FileApiopeneditsave Uploading a file: You can open and read files via the input of type file The...



Share this page:
Follow us:
Task Runner