Le module Dosiero permet de choisir des fichiers sur le poste client au travers de sélecteurs qui exploitent l'IHM de visualisation du système (Windows, Mac OS X, Linux, …), afin de pouvoir exploiter un contenu externe dans un document applicatif en cours d'utilisation.

Principes

En Javascript, pour assurer la sécurité informatique du client (de l'utilisateur, de son ordinateur), il est impossible d'accéder directement au contenu de son disque dur, même en lecture seule.

Les sélecteurs

Afin de pouvoir exploiter les fichiers du poste client il est donc nécessaire de donner la main à l'utilisateur du document applicatif, par le biais d'un élement input de type file : l'importation du contenu d'un fichier passe par une décision humaine.

L'usage d'attributs spécifiques au module Dosiero (target, report, var et nameonly) permet de simplifier l'importation du contenu ou simplement du nom du fichier sélectionné, en rendant plus ou moins transparent (au choix) cet usage pour le lecteur/utilisateur :

L'attribut target permet de définir une cible (un récepteur) pour le contenu, mis à jour juste après la sélection.
L'attribut report permet de définir une destination d'un mini-descriptif du fichier sélectionné.
L'attribut var permet de définir une variable Javascript qui va recevoir le fichier (mais pas son contenu : on le gère alors a posteriori).
L'attribut nameonly permet de ne récupérer que les noms des fichiers choisis.

Les récepteurs

Afin de pouvoir filtrer les importations, tout récepteur peut être lui aussi assorti d'un attribut spécifique, accept, qui filtre l'accès en écriture sur la forme du nom du document exploité.

Le caractère * désigne n'importe quelle suite de caractères, éventuellement vide.

Ainsi accept = "*console*" signifie que l'importation du contenu dans l'élément ayant cet attribut ne sera acceptée que si le nom du document importé contient le mot console. Ainsi les noms Cette belle console.html, Mon interface.console et console-moi.txt sont acceptés.

En revanche accept = "*console" signifie que l'importation du contenu dans l'élément ayant cet attribut ne sera acceptée que si le nom du document importé se termine par console. Ainsi, parmi les noms Cette belle console.html, Mon interface.console et console-moi.txt, seul le second sera accepté.

Celui qui connaît bien les expressions régulières peut filtrer d'une façon plus sophistiquée. Par exemple accept="/console \d+\.(htm|html)$/" signifie qu'on accepte uniquement les contenus de fichiers dont le nom se termine par console suivi d'une espace puis d'une suite de chiffres (\d+), et d'extension .htm ou .html .

L'absence d'attribut signifie qu'on accepte tout, puisque l'attribut accept est conçu comme un moyen de filtrer les sources d'information.

cacher ('la partie principes')

Exemples

Trois usages des sélecteurs pour Dosiero :

pour un récepteur : on choisit un document pour que le contenu remplace celui d'un élément existant ;
pour un récepteur, mais via un sélecteur invisible : juste après le choix de document son contenu remplace celui d'un élément existant ;
pour un usage ultérieur : son contenu est transféré dans une variable globale Javascript, pour un usage différé.
pour obtenir seulement des noms de fichiers : on ne récupère que le nom du fichier sélectionné, par exemple pour en faire une URL.

Un sélecteur (balise `input`) pour un récepteur

Afin de pouvoir exploiter un contenu existant sur le poste client pour compléter un élement initialement vide ou remplacer un élément initalement plein, on utilise un sélecteur de fichiers avec une cible, définie via l'attribut target. Cet élément est dit alors récepteur, et on peut le classer comme tel : son apparence peut donc être significative.

Voici le sélecteur à expérimenter : . En laissant la souris en suspens au-dessus du sélecteur on peut connaître l'identifiant du récepteur du contenu.

Ce sélecteur est défini comme suit :

<input id="le sélecteur de test" type="file" target="le premier récepteur"/>

Ci-dessous l'élément identifié par le premier récepteur, avec le filtre accept="*à insérer.html" (on accepte l'importation uniquement pour tout nom de document se terminant par à insérer.html) :

Pour que cet exemple soit exploitable, le lecteur doit disposer sur sa machine d'un document dont le nom est conforme au filtre. On peut en télécharger des exemples à partir d'un dépôt hubiC.

Après réception, le récepteur est initialisé par AlgoDok pour tout ce qui concerne les éléments algorithmiques : var, js, bool, script language="···" et i onclick="···".

Directement de la sélection à un contenu

Avec les documents applicatifs il est souvent intéressant de pouvoir importer une console de pilotage personnalisée ou une console parmi plusieurs possibles.

Avec un sélecteur invisible on peut insérer directement une console , avec un élément (a priori facultatif) pour noter le compte rendu : .

Voici le source HTML des deux éléments utilisés :

<input id="le sélecteur 1" type="file" class="invisible"
   target="la console" report="le dernier fichier choisi"/>
      
<span class="compte rendu" id="le dernier fichier choisi"></span>

Ici on fait de même (la cible est la même), mais avec un sélecteur visible : .

Sélectionner un fichier pour un usage ultérieur

Cette fois-ci le fichier sélectionné est simplement stocké dans une variable Javascript, définie via l'attribut var, afin de laisser une instruction cliquable (ou un script, ou un module) l'utiliser ultérieurement.

La structure générique d'un tel sélecteur est <input id="···" type="file" var="···"></input>. En laissant la souris en suspens au-dessus du sélecteur on peut connaître le nom de la variable qui reçoit le contenu.

Pour la variable algorithme :

Pour la variable brouillon :

Après avoir sélectionné un fichier via l'un des sélecteurs précédents, on peut tester les instructions suivantes :

écrire (les .informations .sur (l.algorithme)) .dans ("le compte rendu") ci-dessous :
mettre .à .jour ("le script 1") .avec (l.algorithme) ;
mettre .à .jour ("le brouillon") .avec (le.brouillon) (on note bien ici la différence entre l'identifiant le brouillon et la variable brouillon) ;
mettre .à .jour ("le brouillon") .avec (l.algorithme).

Sélectionner des fichiers pour récupérer leur nom

On peut avoir besoin de se contenter de récupérer un nom de fichier, par exemple pour initialiser une image ou un iframe. Dans ces deux derniers cas, Dosiero fait directement le chargement.

Pour insérer une image du dossier (dans un élément IMG) :

Pour charger un élément IFRAME avec un document du dossier :

On peut mettre l'attribut multiple lorsqu'on veut récupérer plusieurs noms en une seule fois. Dosiero ne gère cet attribut que dans ce cas.

Pour récupérer une liste d'images du dossier :

<input multiple nameonly id="le sélecteur d'images" type="file"
       target="la liste des images"/>

fournit le sélecteur multiple et la liste des fichiers sélectionnés correspondant au filtre du récepteur (accept="/.*\.(png|jpg|gif)$/") sera consignée ici : .

En cas de choix multiple pour un récepteur, seul le premier fichier sélectionné est pris en compte ; il est donc inutile d'utiliser cet attribut dans ce cas.

cacher ('la partie exemples')

ILO-fr de Dosiero

Lorsqu'on utilise une variable conjointement à un sélecteur, celle-ci est définitivement liée au fichier lui-même : si le fichier évolue entre les instructions suivantes, les résultats obtenus avec une même instruction peuvent donc s'avérer différents.

En définitive, un sélecteur avec une variable permet de donner un moyen à Javascript d'accéder à volonté —en lecture— à la dernière version d'un fichier moyennant une seule intervention humaine lors de la sélection, nécessaire pour faire le lien entre les deux.

Obtenir des `informations` et `mettre.à.jour`

L'instruction informations (ou informations.sur) permet d'obtenir un bref descriptif d'un fichier sélectionné. Par exemple, après avoir sélectionné un fichier pour la variable algorithme on peut demander d'écrire (les .informations .sur(algorithme)) .sur ("le brouillon").

Dosiero étend la version originelle de l'instruction mettre.à.jour définie dans AlgoDok pour accepter, en plus des éléments, les variables de class FileList (ou File). C'est ce qui a permis, naturellement, la validité des exemples de la partie précédente !

On peut cloner un sélecteur existant

On peut disposer d'un modèle visible ou non, qu'on clone à souhait pour le mettre à l'endroit opportun.

On clone le sélecteur invisible (le sélecteur 1) inclus dans la partie précédente.

Ensuite on peut afficher (les .informations .sur (le .fichier .sélectionné .par ("le sélecteur 1.1")))

Grâce à `Dosiero.ini`, il suffit d'écrire pour créer

La description HTML d'un sélecteur étant courte, il est facile d'en écrire une via une chaîne de caractères.

On écrit un sélecteur, via sa description en HTML, puis on l'initialise convenablement.

Après sélection, on peut mettre .à .jour ("le brouillon") .avec (le .brouillon).

Dosiero : pour exploiter les fichiers du poste client