Attribut HTML accept

L'attribut HTML accept indique au navigateur quels types de fichiers un contrôle <input type="file"> doit proposer dans le sélecteur de fichiers du système d'exploitation. Il s'agit d'un indice pour l'interface utilisateur, et non d'une fonctionnalité de sécurité ou de validation : il facilite la recherche des bons fichiers lorsqu'un utilisateur clique sur le bouton de téléversement.

Cette page explique quelles valeurs prend accept (types MIME, extensions de fichiers et caractères génériques), comment les combiner, comment la valeur se comporte selon les navigateurs, comment accept se combine avec l'attribut multiple et l'encodage de formulaire, et pourquoi vous devez toujours valider les téléversements côté serveur.

Vous ne pouvez utiliser accept que sur l'élément <input>, et uniquement lorsque son type est file. Sur tout autre type d'input, il est ignoré.

Comment le navigateur utilise la valeur

Lorsqu'un utilisateur ouvre le sélecteur de fichiers, le navigateur utilise accept pour pré-filtrer les fichiers affichés ou sélectionnables. Le comportement exact dépend de chaque navigateur et système d'exploitation :

• Chrome / Edge ajoutent une entrée dans la liste déroulante des types de fichiers correspondant à votre liste accept et la sélectionnent par défaut, tout en permettant à l'utilisateur de basculer vers « Tous les fichiers ».
• Firefox filtre la liste de manière similaire, et sur certaines plateformes propose également un accès à « Tous les fichiers ».
• Safari respecte la valeur, mais le libellé et la rigueur du filtre diffèrent de Chrome.

Dans tous les navigateurs, l'utilisateur peut contourner le filtre et sélectionner un fichier qui ne correspond pas au filtre. La valeur accept ne bloque jamais la soumission du formulaire et n'est jamais appliquée de force. Traitez-la uniquement comme un élément de confort.

Syntaxe

<input type="file" accept="value">

La valeur est une liste séparée par des virgules d'un ou plusieurs spécificateurs de type de fichier. (Les anciennes tables de référence affichent parfois les options avec un | entre elles — ce symbole signifie « choisir parmi ces types de valeur », il n'est pas valide dans l'attribut lui-même.) Chaque spécificateur est l'un des suivants :

Vous pouvez combiner n'importe lesquels dans une seule liste, séparés par des virgules.

Exemples

Accepter toute image

<form action="/form/submit" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" accept="image/*" />
  <input type="submit" value="Upload" />
</form>

Accepter des types MIME spécifiques

Utilisez une liste séparée par des virgules pour n'autoriser que certains formats — ici PNG et JPEG, mais pas GIF ni WebP :

<input type="file" name="photo" accept="image/png,image/jpeg" />

Accepter par extension de fichier

Les extensions sont pratiques pour les formats dont le type MIME est verbeux ou incohérent selon les systèmes, comme les documents bureautiques :

<input type="file" name="document" accept=".pdf,.doc,.docx" />

Accepter de l'audio ou de la vidéo

<!-- any audio file -->
<input type="file" name="track" accept="audio/*" />

<!-- any video file -->
<input type="file" name="clip" accept="video/*" />

Combiner types MIME et extensions

Une seule liste accept peut contenir les deux formes à la fois. C'est utile lorsqu'un caractère générique est trop large mais que certains types de fichiers sont plus faciles à exprimer sous forme d'extension :

<input type="file" name="upload" accept="image/png,image/jpeg,.pdf,.docx" />

Utilisation avec multiple et l'encodage de formulaire

accept est presque toujours utilisé avec deux autres fonctionnalités des inputs de type fichier :

• L'attribut multiple permet à l'utilisateur de sélectionner plusieurs fichiers à la fois dans le sélecteur. Il fonctionne de la même manière avec accept : le filtre s'applique à chaque fichier ajouté par l'utilisateur.
• enctype="multipart/form-data" est requis sur l'élément <form> pour que les fichiers soient réellement envoyés. Un encodage de formulaire normal ne transmet que le nom du fichier, pas ses octets.

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="gallery">Choose images:</label>
  <input type="file" id="gallery" name="gallery" accept="image/*" multiple />
  <input type="submit" value="Upload" />
</form>

Pour en savoir plus sur la création de formulaires de téléversement, consultez la balise HTML <form>, la balise HTML <input> et le guide Formulaires HTML.

Sécurité : ne jamais faire confiance à accept

L'attribut accept n'est pas un mécanisme de validation. S'y fier pour la sécurité est dangereux pour deux raisons :

• Usurpation d'extension. Le nom d'un fichier (et donc son extension) ne dit rien de son contenu réel. N'importe qui peut renommer malware.exe en photo.png. Le filtre accept ne vérifie que l'extension et le type MIME déclaré, que le client contrôle tous les deux.
• Détection du type MIME. Le type MIME que le navigateur signale pour un fichier téléversé est dérivé du nom de fichier ou du système d'exploitation et peut être falsifié. Le serveur doit inspecter les octets réels du fichier pour savoir ce qu'il contient vraiment.

Comme l'utilisateur peut contourner entièrement le filtre du sélecteur, chaque téléversement doit être validé côté serveur : vérifiez le vrai type de fichier à partir de son contenu (pas de son nom), imposez une limite de taille, stockez-le en dehors de la racine web ou sous un chemin sécurisé, et n'exécutez jamais les fichiers téléversés. Utilisez accept uniquement pour améliorer l'expérience utilisateur, jamais comme barrière de sécurité.

Pratique