Window : méthode showOpenFilePicker()
Disponibilité limitée
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Contexte sécurisé: Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La méthode showOpenFilePicker() de l'interface Window affiche un sélecteur de fichiers permettant à l'utilisateur·ice de sélectionner un fichier ou plusieurs fichiers et retourne un gestionnaire pour le(s) fichier(s).
Syntaxe
showOpenFilePicker()
showOpenFilePicker(options)
Paramètres
optionsFacultatif-
Un objet contenant des options, qui sont les suivantes :
excludeAcceptAllOptionFacultatif-
Une valeur booléenne qui vaut par défaut
false. Par défaut, le sélecteur doit inclure une option pour ne pas appliquer de filtres de type de fichier (instiguée avec l'option type ci-dessous). Définir cette option surtruesignifie que cette option n'est pas disponible. idFacultatif-
En définissant un identifiant, le navigateur peut se souvenir de différents répertoires pour différents identifiants. Si le même identifiant est utilisé pour un autre sélecteur, le sélecteur s'ouvre dans le même répertoire.
multipleFacultatif-
Une valeur booléenne qui vaut par défaut
false. Lorsqu'elle est définie surtrue, plusieurs fichiers peuvent être sélectionnés. startInFacultatif-
Un objet
FileSystemHandleou un répertoire bien connu ("desktop","documents","downloads","music","pictures"ou"videos") pour ouvrir la boîte de dialogue dans ce répertoire. typesFacultatif-
Un tableau (
Array) des types de fichiers autorisés à sélectionner. Chaque élément est un objet avec les options suivantes :descriptionFacultatif-
Une description optionnelle de la catégorie de types de fichiers autorisés. Par défaut, une chaîne de caractères vide.
accept-
Un
Objectdont les clés sont définies sur le type MIME et les valeurs un tableau (Array) d'extensions de fichiers (voir ci-dessous pour un exemple).
Valeur de retour
Une promesse (Promise) dont le gestionnaire de complétion reçoit un tableau (Array) d'objets FileSystemFileHandle.
Exceptions
AbortErrorDOMException-
Levée si l'utilisateur·ice ferme l'invite sans faire de sélection, ou si l'agent utilisateur juge que les fichiers sélectionnés sont trop sensibles ou dangereux.
SecurityErrorDOMException-
Levée si l'appel a été bloqué par la politique de même origine ou s'il n'a pas été effectué par une interaction utilisateur·ice telle qu'un clic sur un bouton.
TypeError-
Levée si les types acceptés ne peuvent pas être traités, ce qui peut se produire si :
- Une chaîne de caractères clé des options
acceptde n'importe quel élément des optionstypesne peut pas analyser un type MIME valide. - Une ou plusieurs chaînes de caractères valeur des options
acceptde n'importe quel élément des optionstypessont invalides, par exemple si elles ne commencent pas par.et ne se terminent pas par., ou si elles contiennent des points de code invalides et que leur longueur est supérieure à 16. - Les options
typessont vides et les optionsexcludeAcceptAllOptionsonttrue.
- Une chaîne de caractères clé des options
Sécurité
Activation utilisateur transitoire est requise. L'utilisateur·ice doit interagir avec la page ou un élément de l'interface utilisateur pour que cette fonctionnalité fonctionne.
Exemples
Ici, nous définissons l'objet d'options à passer à la méthode. Nous autorisons la sélection de types de fichiers image, sans option pour autoriser tous les types de fichiers, ni sélection multiple de fichiers.
const listeOptions = {
types: [
{
description: "Images",
accept: {
"image/*": [".png", ".gif", ".jpeg", ".jpg"],
},
},
],
excludeAcceptAllOption: true,
multiple: false,
};
Ensuite, nous pouvons créer une fonction asynchrone qui affiche la boîte de dialogue de sélection de fichiers et retourne le fichier sélectionné.
// crée une référence pour notre gestionFichier
let gestionFichier;
async function obtenirFichier() {
// ouvre la boîte de dialogue de sélection de fichiers, déstructure le tableau à un élément retourné
[gestionFichier] = await window.showOpenFilePicker(listeOptions);
// exécute le code avec notre gestionFichier
}
Spécifications
| Spécification |
|---|
| File System Access> # api-showopenfilepicker> |