HTML accept Attribute
The HTML accept attribute provides a hint about the types of files that should be selected with a file upload control. It is used with an <input> element whose type attribute is set to file.
Syntax
The accept attribute is used on an <input> element with type="file". Its value identifies one or more file types that the file picker should make available for selection.
<input type="file" accept="file-type">For example, the following file upload control indicates that image files are expected:
<input type="file" accept="image/*">Attribute Values
| Value | Description |
|---|---|
.extension |
Specifies an accepted file type by its filename extension, such as .jpg or .pdf. |
type/subtype |
Specifies an accepted file type using a valid MIME type without parameters, such as application/pdf. |
audio/* |
Indicates that audio files are accepted. |
video/* |
Indicates that video files are accepted. |
image/* |
Indicates that image files are accepted. |
Multiple accepted file types are written as a comma-separated list. The values act as hints to the browser when it displays the file picker.
Elements That Use the accept Attribute
The accept attribute is currently valid on the <input> element when the input is a file upload control.
| Element | Description |
|---|---|
<input type="file"> |
Provides a hint about the types of files that should be selected with the file upload control. |
Using File Extensions
A filename extension can be used to identify a specific type of file. Each extension begins with a period.
<input type="file" accept=".pdf">Multiple extensions can be included by separating them with commas:
<input type="file" accept=".jpg,.jpeg,.png">Using MIME Types
The accept attribute can also contain MIME types. A MIME type identifies a file format using a type and subtype.
<input type="file" accept="application/pdf">For example, application/pdf indicates that PDF documents are expected.
Accepting Audio, Video, or Images
The values audio/*, video/*, and image/* can be used when any file belonging to one of those general media categories is acceptable.
<input type="file" accept="audio/*">
<input type="file" accept="video/*">
<input type="file" accept="image/*">For example, image/* allows the browser to offer supported image formats rather than limiting the picker to one specific image extension or MIME type.
Accepting Multiple File Types
Different file extensions and MIME types can be combined in a comma-separated list when several formats are acceptable.
<input type="file" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">Providing the relevant extensions and MIME types can help browsers identify the intended files when a format may be represented in more than one way.
File Validation
The accept attribute is a hint for the browser's file picker and should not be treated as file validation. Depending on the browser and device, users may still be able to select files that do not match the specified values.
Websites that receive uploaded files should validate the files on the server and should not rely on the accept attribute to determine whether an uploaded file is safe or has the expected format.
Common Mistakes
Do not use spaces as separators between multiple file types. Accepted types are written as a comma-separated list.
<!-- Correct -->
<input type="file" accept=".jpg,.jpeg,.png">Do not use the accept attribute on ordinary text, email, number, or other input controls. It applies to the File Upload state created with type="file".
Do not rely on accept as a security measure or as the only validation of an uploaded file.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The accept attribute on <input type="file"> is widely supported in current core browsers. File picker behavior and available filtering options can vary between browsers, operating systems, and devices.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the accept Attribute
Edit the accept value in the example to allow different types of files. Select the file control to see how your browser or device uses the value when displaying available files.
Summary
The HTML accept attribute provides a hint about the types of files expected by an <input type="file"> control. Accepted files can be identified with filename extensions, MIME types, or the audio/*, video/*, and image/* values. Multiple types can be provided in a comma-separated list, but uploaded files should still be validated by the server.