How to work with an Input File in an HTML form?

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

HTML: One file

<input type="file"  />

HTML: Multiple Files

  • The HTML
<input type="file" multiple />
  • Result

How to set the default file value?

  • from the operating system:
    • This is not possible to set the default file.
    • It would then be a security issue because you could steal files from user's computers.
  • generated: you can create and set a file object with a generated content

HTML: 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:

HTML: Disabled

<input type="file" disabled  />

HTML: How to select only a 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"/>

HTML: 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:

Javascript: How to manipulate the chosen file

To see examples of how Javascript can take and handle the file chosen, see the dedicated fileApi page

Javascript: How to create and send with FormData

When a file is send with multipart form data, the file is added in the formdata as a File object

Example:

<form onsubmit="handleSubmit(this); return false;">
<input type="file" name="myfile"/>
<br>
<input name="button" type="submit" value="Choose a file and see the data type" />
</form>

The FormData constructor takes a form element as parameter. See FormData constructor Specification

handleSubmit = (form) => {
  // build the formData object
  let formData =  new FormData(form);
  // retrieve the entries in a entries variable of iterator type
  let entries = formData.entries();
  // loop over the iterator
  let result = entries.next();
  while (!result.done) {
    console.log("Input: Name: "+result.value[0]+", value: "+result.value[1].constructor.name);
    result = entries.next();
  }
}
  • 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 File Multiple Warning Dialog
How to handle files in Javascript with the File API of the Browser?

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...
What are HTML Input Elements?

An inputinput element of a form control that permits to define a scalar value (single value) inputFull list Ref Doc The type attribute defined: the default behavior the design of the element....



Share this page:
Follow us:
Task Runner