Filepicker

Boîte de dialogue de sélection de fichier

Il est fréquent de vouloir sélectionner un fichier depuis votre système local de fichiers. Le tutoriel vous montre les bases pour initialiser et ouvrir la boîte de dialogue de sélection. L'aspect de celle-ci sera dépendante de votre système d'exploitation.

Voici un exemple d'utilisation.

Le code

 <?xml version="1.0" encoding="ISO-8859-1" ?>
 <?xml-stylesheet href="[[chrome://global/skin/]]" type="text/css"?>
 <window title="Boîte de sélection d'un fichier"
        [[xmlns:html="http://www.w3.org/1999/xhtml]]"
        xmlns="[[http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul]]"
        >

 <script><![CDATA[
 function selection() {
  var nsIFilePicker = Components.interfaces.nsIFilePicker;
  var fp = Components.classes["@mozilla.org/filepicker;1"]
          .createInstance(nsIFilePicker);
  fp.init(window, "Sélectionner un fichier", nsIFilePicker.modeOpen);
  fp.appendFilters(nsIFilePicker.filterText | nsIFilePicker.filterAll);
  if (fp.show() != nsIFilePicker.returnOK) {
    alert("Vous avez annulé la sélection");
    return;
  }
  var filePath = fp.file.path;
  alert("Fichier sélectionné : " + filePath);
 }
 ]]></script>

 <[[html:h1>Test]] de sélection d'un fichier</[[html:h1]]>
 <hbox>
   <label value="Cliquez sur ... pour ouvrir la boîte de sélection"/>
   <button label="..." oncommand="selection();"/>
 </hbox>
 </window>

Explications

Dans cet exemple, le composant @mozilla.org/filepicker;1 est utilisé. Vous devez posséder des privilèges vous permettant d'accéder à votre système local de fichiers, ce qui est le cas dans une extension enregistrée dans le chrome.

• *fp.init()** se charge d'initialiser la boîte de dialogue - sans l'afficher - avec comme paramètres, la fenêtre demandant son ouverture, le titre de la boîte de dialogue et le mode d'ouverture (ici sélection d'un fichier pour sa lecture). Les différents modes d'ouverture sont les suivants :
  • modeOpen : sélection pour lecture
  • modeSave : sélection pour enregistrement
  • modeGetFolder : sélection d'un répertoire
  • modeOpenMultiple : sélection multiples

Des filtres sont ensuite ajoutés pour les différents types de fichiers à sélectionner. Ici, un filtre est mis pour les textes et pour tous les fichiers. Ainsi, l'utilisateur aura a sa disposition un système de filtrage sur sa boîte de dialogue. Les différents types de filtres sont les suivants :

• filterAll : tous les fichiers
• filterHTML : les fichiers html
• filterText : les fichiers textes
• filterImages : les images
• filterXML : les fichiers xml
• filterXUL : les fichiers xul
• filterApps : les applications

Finalement, la boîte de dialogue est ouverte par l'appel de la méthode fp.show(). Cette dernière retourne la constante returnOK si l'utilisateur a sélectionné un fichier, returnCancel si l'utilisateur a annulé sa sélection, ou returnReplace en cas d'écrasement d'un fichier.

Le fichier est obtenu par la propriété fp.file. Le résultat est un objet nsILocalFile. Pour obtenir le chemin complet du fichier sélectionné, il faudra utiliser la propriété path comme indiquée dans l'exemple.

Voir aussi

• Téléchargement de fichier : utiliser le gestionnaire de téléchargement intégré