Point technique :
dialog.showOpenDialog([fenetreNavigateur, ]options[, callback])
fenetreNavigateurBrowserWindow (optionnel)optionsObjecttitleStringdefaultPathStringfiltersArraypropertiesArray - Contient les propriétés de la boîte de dialogue, peut inclureopenFile,openDirectory,multiSelectionsetcreateDirectorycallbackFunction (optionnel)
Si cette méthode est utilisée avec succès, elle retourne un tableau des chemins de ficheirs sélectionnés par l'utilisateur, sinon elle retourne undefined.
Les filters permettent de spécifier un tableau de fichiers à afficher ou à sélectionner lorsque vous souhaitez limiter les actions de l'utilisatuer. Par exemple :
{
filters: [
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },
{ name: 'Vidéos', extensions: ['mkv', 'avi', 'mp4'] },
{ name: 'Type de fichier personnalisé', extensions: ['as'] },
{ name: 'Tous les fichiers', extensions: ['*'] }
]
}
Le tableau extensions ne doit contenir que des extensions de fichiers, sans caractères jokers ni point (par exemple, 'png' est correct, mais '.png' et '*.png' ne le sont pas). Pour afficher tous les fichiers, utilisez le joker '*' (les autres caractères jokers ne sont pas pris en charge).
Si le callback est appelé, l'API sera invoquée de manière asynchroen et le résultat sera transmis via callback(nomsFichiers).
Remarque : Sous Windows et Linux, une boîte de dialogue d'ouverture ne peut être à la fois un sélecteur de fichiers et un sélecteur de répertoires. Par conséquent, si vous définissez les valeurs de properties sur ['openFile', 'openDirectory'] sur ces plateformes, une boîte de sélection de répertoires sera affichée.
Exemple :
- Créer "sélecteur-fichiers.html"
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sélecteur de fichiers</title>
</head>
<body>
<button id="boutonSelection">Choisir une image</button>
![]()
<script>
const moduleElectron = require("@electron/remote"); // Importation du module remote
const boiteDialogue = moduleElectron.dialog; // Boîte de dialogue de sélection de fichier
const bouton = document.getElementById("boutonSelection");
bouton.addEventListener("click", () => {
boiteDialogue.showOpenDialog({
title:'Veuillez sélectionner une image', // Titre de la boîte de dialogue
defaultPath:'image_par_défaut.jpg', // Nom de fichier par défaut
filters:[ // Filtrage des types de fichiers
{ name: 'Images', extensions: ['jpg', 'png', 'gif'] },
{ name: 'Vidéos', extensions: ['mkv', 'avi', 'mp4'] }
]
}).then(resultat => { // Méthode de rappel après sélection d'une image
console.log(resultat); // Renvoie un objet
const image = document.getElementById("imageAffichée");
image.setAttribute("src", resultat.filePaths[0]); // Affichage de l'image
}).catch(erreur => {
console.log(erreur); // Gestion des erreurs
});
});
</script>
</body>
</html>
- Résultat d'exécution :