Attribute accept

The accept attribute is added to the <input> tag. It allows specifying which types of files the user needs to attach.

Consider an example of a form where a user is asked to attach a picture of a cat:

        
          
          <form method="post">  <label for="cat-picture">Attach a cat photo</label>  <input    type="file"    id="cat-picture"    name="cat-picture"    accept=".jpg, .jpeg, .png"  >  <button>Attach</button></form>
          <form method="post">
  <label for="cat-picture">Attach a cat photo</label>
  <input
    type="file"
    id="cat-picture"
    name="cat-picture"
    accept=".jpg, .jpeg, .png"
  >
  <button>Attach</button>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

This form will only display files with the specified extensions in the file selection dialog.

The <input> element with the accept attribute limits the types of files that can be selected in the file selection dialog. This enhances the user experience by making the file selection process more convenient and less error-prone.

It is important to understand that the accept attribute simply shows the user files of the types specified in the attribute's value when the dialog opens, but it does not filter them. File type checks should occur on the server side. Without this, nothing prevents a user from attaching a boring text document, even if you were expecting a kitty photo.

The accept attribute applies only to the <input> element with type file. It can accept the following values:

• 'audio/*' — accepts audio files of any format;
• 'video/*' — accepts video of any format;
• 'image/*' — accepts images of any format;
• 'image/jpeg' — JPEG images;
• 'image/png' — PNG images;
• 'application/pdf' — PDF documents;
• 'audio/mpeg' — MP3 audio files;
• 'video/mp4' — MP4 video files;
• a MIME type string without extensions;
• file extensions preceded by a dot, e.g., .jpg, .pdf, .docx, and so on.

You can specify multiple values, and you can also combine them:

        
          
          <input  type="file"  name="cat-pic-video"  accept="video/*, .jpg, .jpeg, .png">
          <input
  type="file"
  name="cat-pic-video"
  accept="video/*, .jpg, .jpeg, .png"
>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can also combine MIME types and file extensions for greater flexibility:

        
          
          <input  type="file"  name="documents"  accept="    .pdf,    application/msword,    application/vnd.openxmlformats-officedocument.wordprocessingml.document  ">
          <input
  type="file"
  name="documents"
  accept="
    .pdf,
    application/msword,
    application/vnd.openxmlformats-officedocument.wordprocessingml.document
  "
>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The accept attribute does not accept arbitrary strings that do not correspond to MIME formats or file extensions. For example, the value text without specifying an extension or MIME type will be invalid.

Here you can feel how the browser behaves with extensions for all types of images, videos, and certain document extensions:

And here with certain image extensions:

1. Browser Support: Some older browsers may not fully support the accept attribute, especially when it comes to complex combinations of MIME types and file extensions. It is worth checking the attribute's support in specific browsers at Can I Use.
2. No Client-Side Filtering: The accept attribute does not prevent the upload of inappropriate files. It is merely a guideline for the file selection dialog.
3. Server-Side Validation Required: It is necessary to implement file type checks on the server side for security and proper application functionality.

The multiple attribute: allows the user to select multiple files.

        
          
          <input  type="file"  name="cat-pictures"  accept=".jpg, .jpeg, .png"  multiple>
          <input
  type="file"
  name="cat-pictures"
  accept=".jpg, .jpeg, .png"
  multiple
>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The required attribute: indicates that the field is mandatory.

        
          
          <input  type="file"  name="cat-picture"  accept=".jpg, .jpeg, .png"  required>
          <input
  type="file"
  name="cat-picture"
  accept=".jpg, .jpeg, .png"
  required
>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

💡 What to do if the user has several cats and wants to show you all of them? The multiple attribute will help.

        
          
          document.getElementById('cat-picture').addEventListener('change', function() {  const file = this.files[0]  if (file && !file.type.match('image.*')) {    alert('Please select an image.')    this.value = ''  }})
          document.getElementById('cat-picture').addEventListener('change', function() {
  const file = this.files[0]
  if (file && !file.type.match('image.*')) {
    alert('Please select an image.')
    this.value = ''
  }
})

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          function UploadForm() {  return (    <form method="post">      <label htmlFor="cat-picture">Attach a cat photo</label>      <input        type="file"        id="cat-picture"        name="cat-picture"        accept=".jpg, .jpeg, .png"      />      <button>Attach</button>    </form>  );}
          function UploadForm() {
  return (
    <form method="post">
      <label htmlFor="cat-picture">Attach a cat photo</label>
      <input
        type="file"
        id="cat-picture"
        name="cat-picture"
        accept=".jpg, .jpeg, .png"
      />
      <button>Attach</button>
    </form>
  );
}

        
        
          
            
            Copy
            Copied
            Failed to copy