A file input'svalue attribute contains a string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string (""). When the user selected multiple files, thevalue represents the first file in the list of files they selected. The other files can be identified using theinput'sHTMLInputElement.files property.

In addition to the common attributes shared by all<input> elements, inputs of typefile also support the following attributes.

Theaccept attribute value is a string that defines the file types the file input should accept. This string is a comma-separated list ofunique file type specifiers. Because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given format.

For instance, there are a number of ways Microsoft Word files can be identified, so a site that accepts Word files might use an<input> like this:

<input  type="file"   accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

Thecapture attribute value is a string that specifies which camera to use for capture of image or video data, if theaccept attribute indicates that the input should be of one of those types. A value ofuser indicates that the user-facing camera and/or microphone should be used. A value ofenvironment specifies that the outward-facing camera and/or microphone should be used. If this attribute is missing, theuser agent is free to decide on its own what to do. If the requested facing mode isn't available, the user agent may fall back to its preferred default mode.

When themultiple Boolean attribute is specified, the file input allows the user to select more than one file.

In addition to the attributes listed above, the following non-standard attributes are available on some browsers. You should try to avoid using them when possible, since doing so will limit the ability of your code to function in browsers that don't implement them.

The Booleanwebkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. SeeHTMLInputElement.webkitdirectory for additional details and examples.

Aunique file type specifier is a string that describes a type of file that may be selected by the user in an<input> element of typefile. Each unique file type specifier may take one of the following forms:

• A valid case-insensitive filename extension, starting with a period (".") character. For example:.jpg,.pdf, or.doc.
• A valid MIME type string, with no extensions.
• The stringaudio/* meaning "any audio file".
• The stringvideo/* meaning "any video file".
• The stringimage/* meaning "any image file".

Theaccept attribute takes a string containing one or more of these unique file type specifiers as its value, separated by commas. For example, a file picker that needs content that can be presented as an image, including both standard image formats and PDF files, might look like this:

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">  <div>    <label for="file">Choose file to upload</label>    <input type="file" name="file" multiple />  </div>  <div>    <button>Submit</button>  </div></form>

div {  margin-bottom: 10px;}

This produces the following output:

Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Including themultiple attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g., by holding downShift orControl and then clicking). If you only want the user to choose a single file per<input>, omit themultiple attribute.

The selected files' are returned by the element'sHTMLInputElement.files property, which is aFileList object containing a list ofFile objects. TheFileList behaves like an array, so you can check itslength property to get the number of selected files.

EachFile object contains the following information:

name

The file's name.

lastModified

A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970, at midnight).

lastModifiedDateDeprecated

ADate object representing the date and time at which the file was last modified.This is deprecated and should not be used. UselastModified instead.

size

The size of the file in bytes.

type

The file'sMIME type.

webkitRelativePathNon-standard

A string specifying the file's path relative to the base directory selected in a directory picker (that is, afile picker in which thewebkitdirectory attribute is set).This is non-standard and should be used with caution.

Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such asJPEG orPNG.

Acceptable file types can be specified with theaccept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

• accept="image/png" oraccept=".png" — Accepts PNG files.
• accept="image/png, image/jpeg" oraccept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.
• accept="image/*" — Accept any file with animage/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
• accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an MS Word document.

Let's look at a more complete example:

<form method="post" enctype="multipart/form-data">  <div>    <label for="profile_pic">Choose file to upload</label>    <input      type="file"           name="profile_pic"      accept=".jpg, .jpeg, .png" />  </div>  <div>    <button>Submit</button>  </div></form>

div {  margin-bottom: 10px;}

This produces a similar-looking output to the previous example:

It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in theaccept value (the exact interface differs across browsers and operating systems).

Theaccept attribute doesn't validate the types of the selected files; it provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that theaccept attribute is backed up by appropriate server-side validation.

Thecancel event is fired when the user does not change their selection, reselecting the previously selected files. Thecancel event is also fired when the file picker dialog gets closed, or canceled, via the "cancel" button or theescape key.

For example, the following code will log to the console if the user closes the popup without selecting a file:

const elem = document.createElement("input");elem.type = "file";elem.addEventListener("cancel", () => {  console.log("Cancelled.");});elem.addEventListener("change", () => {  if (elem.files.length === 1) {    console.log("File selected: ", elem.files[0]);  }});elem.click();

1. You cannot set the value of a file picker from a script — doing something like the following has no effect:

   js

   const input = document.querySelector("input[type=file]");input.value = "foo";

2. When a file is chosen using an<input type="file">, the real path to the source file is not shown in the input'svalue attribute for obvious security reasons. Instead, the filename is shown, withC:\fakepath\ prepended to it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact isdefined in the spec.

In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in theHTMLInputElement.files property, as well as showing off a few clever tricks.

First of all, let's look at the HTML:

<form method="post" enctype="multipart/form-data">  <div>    <label for="image_uploads">Choose images to upload (PNG, JPG)</label>    <input      type="file"           name="image_uploads"      accept=".jpg, .jpeg, .png"      multiple />  </div>  <div>    <p>No files currently selected for upload</p>  </div>  <div>    <button>Submit</button>  </div></form>

html {  font-family: sans-serif;}form {  background: #ccc;  margin: 0 auto;  padding: 20px;  border: 1px solid black;}form ol {  padding-left: 0;}form li,div > p {  background: #eee;  display: flex;  justify-content: space-between;  margin-bottom: 10px;  list-style-type: none;  border: 1px solid black;}form img {  height: 64px;  order: 1;}form p {  line-height: 32px;  padding-left: 10px;}form label,form button {  background-color: #7f9ccb;  padding: 5px 10px;  border-radius: 5px;  border: 1px ridge black;  font-size: 0.8rem;  height: auto;}form label:hover,form button:hover {  background-color: #2d5ba3;  color: white;}form label:active,form button:active {  background-color: #0d3f8f;  color: white;}

This is similar to what we've seen before — nothing special to comment on.

Next, let's walk through the JavaScript.

In the first lines of script, we get references to the form input itself, and the<div> element with the class of.preview. Next, we hide the<input> element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers. You can activate theinput element by clicking its<label>, so it is better to visually hide theinput and style the label like a button, so the user will know to interact with it if they want to upload files.

const input = document.querySelector("input");const preview = document.querySelector(".preview");input.style.opacity = 0;

Next, we add anevent listener to the input to listen for changes to its selected value (in this case, when files are selected). The event listener invokes our customupdateImageDisplay() function.

input.addEventListener("change", updateImageDisplay);

Whenever theupdateImageDisplay() function is invoked, we:

• Use awhile loop to empty the previous contents of the preview<div>.

• Grab theFileList object that contains the information on all the selected files, and store it in a variable calledcurFiles.

• Check to see if no files were selected, by checking ifcurFiles.length is equal to 0. If so, print a message into the preview<div> stating that no files have been selected.

• If fileshave been selected, we loop through each one, printing information about it into the preview<div>. Things to note here:

• We use the customvalidFileType() function to check whether the file is of the correct type (e.g., the image types specified in theaccept attribute).

• If it is, we:

  • Print out its name and file size into a list item inside the previous<div> (obtained fromfile.name andfile.size). The customreturnFileSize() function returns a nicely-formatted version of the size in bytes/KB/MB (by default the browser reports the size in absolute bytes).
  • Generate a thumbnail preview of the image by callingURL.createObjectURL(file). Then, insert the image into the list item too by creating a new<img> and setting itssrc to the thumbnail.

• If the file type is invalid, we display a message inside a list item telling the user that they need to select a different file type.

function updateImageDisplay() {  while (preview.firstChild) {    preview.removeChild(preview.firstChild);  }  const curFiles = input.files;  if (curFiles.length === 0) {    const para = document.createElement("p");    para.textContent = "No files currently selected for upload";    preview.appendChild(para);  } else {    const list = document.createElement("ol");    preview.appendChild(list);    for (const file of curFiles) {      const listItem = document.createElement("li");      const para = document.createElement("p");      if (validFileType(file)) {        para.textContent = `File name ${file.name}, file size ${returnFileSize(          file.size,        )}.`;        const image = document.createElement("img");        image.src = URL.createObjectURL(file);        image.alt = image.title = file.name;        listItem.appendChild(image);        listItem.appendChild(para);      } else {        para.textContent = `File name ${file.name}: Not a valid file type. Update your selection.`;        listItem.appendChild(para);      }      list.appendChild(listItem);    }  }}

The customvalidFileType() function takes aFile object as a parameter, then usesArray.prototype.includes() to check if any value in thefileTypes matches the file'stype property. If a match is found, the function returnstrue. If no match is found, it returnsfalse.

// https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_typesconst fileTypes = [  "image/apng",  "image/bmp",  "image/gif",  "image/jpeg",  "image/pjpeg",  "image/png",  "image/svg+xml",  "image/tiff",  "image/webp",  "image/x-icon",];function validFileType(file) {  return fileTypes.includes(file.type);}

ThereturnFileSize() function takes a number (of bytes, taken from the current file'ssize property), and turns it into a nicely formatted size in bytes/KB/MB.

function returnFileSize(number) {  if (number < 1e3) {    return `${number} bytes`;  } else if (number >= 1e3 && number < 1e6) {    return `${(number / 1e3).toFixed(1)} KB`;  }  return `${(number / 1e6).toFixed(1)} MB`;}

const button = document.querySelector("form button");button.addEventListener("click", (e) => {  e.preventDefault();  const para = document.createElement("p");  para.append("Image uploaded!");  preview.replaceChildren(para);});

The example looks like this; have a play:

• Using files from web applications — contains a number of other useful examples related to<input type="file"> and theFile API.