Discussion :

[hapalemur]

Bonjour,

Je crée les éléments d'un formulaire ( Button, TextBox et FileInput ) de la façon suivante :

• le fichier javascript
  

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  function visuel(){
   
      /* Sélection du fichier visuel à uploader sur le serveur*/
      filevis = new dojox.form.FileInput({
          id: "fichier",
          label: "Parcourir ...",
          cancelText: "Effacer",
          name: "filorigine"
      }, document.createElement('div'));
   
      // ajouter la TextBox à la section <div> "fichierVis":
      dojo.byId("fichierVis").appendChild(filevis.domNode);
      filevis.startup();
   
      /* Sélection du répertoire des visuels sur le serveur*/
      destvis = new dijit.form.TextBox({
          name: "repdest"
      }, document.createElement('div'));
      // ajouter la TextBox à la section <div> "repDest":
      dojo.byId("repDest").appendChild(destvis.domNode);
   
      var selectdestvis = new dijit.form.Button({
          label: "Parcourir ...",
          name: "seldest"
      }, document.createElement('td'));
      // ajouter le nouveau bouton à la section <td> "selDir":
      dojo.byId("selDir").appendChild(selectdestvis.domNode);
      dojo.connect(dojo.byId("selDir"), "onclick", "repertoireServeur"); // Tree : on affiche l'arbo du serveur
  }

• la page jsp

  Code :

  Sélectionner tout - Visualiser dans une fenêtre à part

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  ......
    <link rel="stylesheet" href="resources/Dojo-1.3.0/dojox/form/resources/FileInput.css" />
  .......
   <div dojoType="dijit.form.Form" id="formulaire1" class="nihilo">
              <table align="center">
                  <tr>
                      <td> <b>Fichier origine</b> </td>
                      <td colspan="2">
                          <div id="fichierVis" style="width:500px;"></div>   <!-- FileInput  -->
                      </td>
                  </tr>
                  <tr>
                      <td> <b>R&eacute;pertoire de destination</b> </td>
                      <td>
                          <div id="repDest" style="width: 240px;"></div>     <!-- TextBox  -->
                      </td>
                      <td id="selDir"></td>     <!-- Button : selection repertoire serveur  ( Tree )  -->
                  </tr>
              </table>
  </div>

  Je mets les éléments FileInput et TextBox dans un <div> sinon celà casse ma mise en page.

L'utilisation de FileInput ne renseigne dans le champ que le nom fichier et pas le chemin complet comme le fait la balise <input type="file" .... > . Celà risque de poser problème lors de l'upload.

Mais avant d'uploader, faudrait-il pouvoir récupérer la valeur, et tout se passe comme s'il n'y avait pas d'affectation de la chaine affichée dans le champ. La récupération ayant été effectuée par les 2 méthodes :

1. dojo.toJson
   

   Code :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   3
   data = dijit.byId('formulaire1').attr('value');
   myData = dojo.toJson(data);
   alert( 'Valeurs du JSON : ' + myData);

   Il n'y a aucune valeur attribuée au FileInput ; on récupère également la valeur ( "seldest" : "" ) du Button
2. dojo.form.ToJson
   

   Code :

   Sélectionner tout - Visualiser dans une fenêtre à part

   1
   2
   myData = dojo.formToJson('formulaire1');
   alert( 'Valeurs du JSON : ' + myData);

   Un peu plus correct car les champs n'ayant pas d'affectation ("") n'apparraissent pas : donc rien sur le FileInput et sur le Button.

Mais vu cette remarque dans le post Form réparti dans plusieurs ContentPane et BorderContainer

Par contre si tu as un champ de type input type="file", alors là c'est foutu !

je subodore un "piège" ou une exception concernant le FileInput.

[emmanuel.remy]

Salut,

Une réponse brève concernant le dojox.form.FileInput. Sa conception est la suivante: à un contrôle input type="file" habituel il superpose un input type="text" de manière à gérer lui même l'affichage dans la zone d'input, sachant que le HTML interdit l'affectation d'un input type="file" pour des raisons évidentes de sécurité. Donc du input type="file" tu ne vois réellement que le bouton... auquel se colle un autre bouton "cancel" permettant d'annuler l'upload prévu.
Enfin il faut savoir que le contrôle texte superposé n'a pas de name et n'est donc pas posté avec le formulaire. De toute façon cela n'aurait aucun intérêt a priori car l'upload suffit à lui-même.

Enfin pour modifier/affecter/lire le nom du fichier afficher (c'est à titre d'info, car non nécessaire), tu peux utiliser le noeud inputNode qui pointe sur le contrôle texte superposé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
filevis = new dojox.form.FileInput({
...    }, ...);
 
//à n e pas faire, aucun intérêt !
filevis.inputNode.value = "J'écrase le nom du fichier sélectionné";

Bon dev,

ERE

[hapalemur]

Bonjour,
Je reviens sur ce post ( ah les joies du multi-taches ) pour baliser mon upload de fichiers.
Donc, je parviens à sélectionner un fichier local ( Question : FileInput ne possède pas de filtre sur les extensions : *.PNG, *.JPEG ? ); ensuite je le récupère sur le serveur grace à la fonction d'envoi de formulaire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function envoiFormulaire(){
        var nomfichier = filevis.inputNode.value;
        alert( 'Nom du fichier : ' + nomfichier);
 
    dojo.io.iframe.send({
        url: "loader",
        method: "post",
        handleAs: "text",
        form: dojo.byId('formulaire1'),
        handle: function(data,ioArgs){
            var retour = dojo.fromJson(data);
            if (retour.status == "ok"){
                dojo.byId("resultUpload").innerHTML = data;
            }
            else {
                dojo.byId("resultUpload").innerHTML = retour.erreur;
            }
        }
    });
}

Le problème, c'est qu'il s'agit d'un fichier image que l'utilisateur doit visualiser avant de valider l'ensemble des données saisies. La visualisation s'effectue dans un ContentPane et de nombreuses variations ont été essayées autour de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 myimage.attr('content','<img src="file:///............" alt="Default selection" />');

et celà sans succés : sans doute une limitation d'accès aux fichiers locaux!
Alors, solution de secours ( et assez "tordue" ), comme le download des images fonctionne, dans le fichier retourné par l'upload je récupère l' url du fichier image sur le serveur.
L'ennui avec cette solution, c'est que j'envoie 2 fois les données du formulaire vers le serveur soit :

1. selection fichier : le onchange du FileInput appelle un fonction assez similaire à la fct envoiFormulaire
2. validation formulaire

J'ai bien essayé d'avoir une fonction envoiFormulaireBis qui limite les éléments envoyés au FileInput ( en jouant sur le content ), mais je n'ai pas réussi à la faire fonctionner : en dernière solution il me reste la possibilité de scinder mes données en 3 formulaires ( le FileInput est en plein milieu de mes données ! ) ; mais celà me semble un peu lourd
Merci pour les pistes et les conseils.

[emmanuel.remy]

Salut,

1. Non tu ne peux pas en standard limiter à certaines extensions de fichiers
2. Il est impossible pour des raisons de sécurité d'accéder au poste client
3. Regarde plutôt dojox.form.FileInputAuto qui te simplifiera grandement ton upload d'image avec prévisualisation dès que réalisé... il est fait pour ça

Bon dev,

ERE