HTMLInputElement : propriété webkitdirectory
Baseline
2025
Nouvellement disponible
Depuis August 2025, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété webkitdirectory de l'interface HTMLInputElement reflète l'attribut HTML webkitdirectory, qui indique que les éléments <input type="file"> ne peuvent sélectionner que des répertoires au lieu de fichiers.
Lorsque un répertoire est sélectionné, le répertoire et toute sa hiérarchie de contenu sont inclus dans l'ensemble des éléments sélectionnés.
Les entrées du système de fichiers sélectionnées peuvent être obtenues à l'aide de la propriété webkitEntries.
Note :
Cette propriété est appelée webkitdirectory dans la spécification en raison de ses origines en tant qu'API spécifique à Google Chrome.
Valeur
Un booléen ; true si l'élément HTML <input> doit permettre de ne sélectionner que des répertoires ou false si seuls les fichiers doivent être sélectionnables.
Description
Définir webkitdirectory sur true fait en sorte que l'élément d'entrée propose des répertoires à l'utilisateur·ice au lieu de fichiers.
Après que l'utilisateur·ice a choisi un répertoire, chaque objet File dans le files retourné a sa propriété File.webkitRelativePath définie sur un chemin relatif au répertoire ancêtre sélectionné.
Par exemple, considérez ce système de fichiers :
AlbumPhotos
├── Aniversaires
│ ├── 1er anniversaire de Jamie
│ │ ├── PIC1000.jpg
│ │ └── PIC1044.jpg
│ └── 40 ans de Don
│ ├── PIC2343.jpg
│ └── PIC2356.jpg
└── Vacances
└── Mars
├── PIC5556.jpg
├── PIC5684.jpg
└── PIC5712.jpg
Si l'utilisateur·ice choisit le répertoire PhotoAlbums, la liste rapportée en fichiers, contiendra des objets File pour chaque fichier.
L'entrée pour PIC2343.jpg aura un webkitRelativePath de PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg.
Cela permet de déterminer la hiérarchie du répertoire sélectionné même si le FileList est plat.
Note :
Le comportement de webkitRelativePath est différent dans Chromium < 72.
Voir ce bug (angl.) pour plus de détails.
Exemples
Dans cet exemple, un sélecteur de répertoires est présenté, permettant à l'utilisateur·ice de choisir un ou plusieurs répertoires.
Lorsque l'évènement change se produit, une liste de tous les fichiers contenus dans les hiérarchies de répertoires sélectionnées est créée et affichée.
HTML
<input type="file" id="file-picker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>
JavaScript
document.getElementById("file-picker").addEventListener("change", (event) => {
let output = document.getElementById("listing");
for (const file of event.target.files) {
let item = document.createElement("li");
item.textContent = file.webkitRelativePath;
output.appendChild(item);
}
});
Résultats
Spécifications
| Spécification |
|---|
| File and Directory Entries API # dom-htmlinputelement-webkitdirectory |
Compatibilité des navigateurs
Voir aussi
- L'API d'entrée de fichiers et de répertoires
- La propriété
HTMLInputElement.webkitEntries - La propriété
File.webkitRelativePath