HtmlConceptBeginner · 3 min read

What is accept Attribute in File Input in HTML

The accept attribute in an HTML <input type="file"> element specifies the types of files that the user is allowed to select. It helps browsers filter the file dialog to show only files matching the given file extensions or MIME types.

⚙️

How It Works

The accept attribute acts like a filter for the file picker window that opens when you click a file input button. Imagine you are at a grocery store and you only want to buy fruits. The accept attribute is like a sign that tells the store clerk to only show you fruits, hiding everything else.

When you add accept to your file input, the browser will only let users see and pick files that match the types you specify. For example, if you only want images, you can tell the browser to show only image files like .jpg or .png. This makes it easier for users to pick the right files and helps prevent mistakes.

However, this is just a hint to the browser. Users can still try to upload other file types if they bypass the filter, so you should always check the file type again on the server side.

💻

Example

This example shows a file input that only accepts image files (JPEG and PNG). When you click the button, the file picker will only show these image types.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accept Attribute Example</title>
</head>
<body>
  <form>
    <label for="imageUpload">Upload an image:</label>
    <input type="file" id="imageUpload" name="imageUpload" accept="image/jpeg, image/png">
  </form>
</body>
</html>

Output

A file input button labeled 'Upload an image:' that opens a file picker showing only JPEG and PNG image files.

🎯

When to Use

Use the accept attribute when you want to guide users to upload only certain types of files. This is helpful in many real-world cases:

Profile pictures: Allow only image files like .jpg or .png to keep uploads consistent.
Document uploads: Restrict to PDFs or Word documents to ensure correct file formats.
Audio or video uploads: Limit to specific media types to avoid unsupported files.

It improves user experience by reducing confusion and errors during file selection. But remember, always validate files on the server too.

✅

Key Points

The accept attribute filters file types shown in the file picker.
It accepts file extensions (like .jpg) or MIME types (like image/png).
It improves user experience but does not guarantee file type security.
Always validate file types on the server side after upload.

✅

Key Takeaways

The accept attribute limits file types users can select in a file input.

It accepts MIME types or file extensions to filter the file picker dialog.

Use it to improve user experience by guiding correct file uploads.

It is not a security feature; always validate files on the server.

Common uses include images, documents, audio, and video file uploads.