Discussion :

[edogawa]

Bonjour tout le monde,
j'utilise dans ma page jsp, la tag <html:file /> qui permet d'uploader un fichier, et de le mettre dans un objet de type FormFile.
lorsque je choisis un fichier et je clique sur upload, je veux afficher une barre de progression (juste une image .gif) et après la fin de l'upload, c'est à dire (si j'ai bien compris le mécanisme, le set de l'objet FormFile) je la fais disparaître.

Ma question comment je peux utilisé FormFile, pour savoir que mon fichier est uploadé ?

j'espère que j'étais clair, et merci de votre aide.

[CaptainCyd]

Bonjour,

si je comprends bien, tu veux que pendant que tu fais l'upload de ton fichier, tu veux qu'une barre de progression arrive, fait patienter, et quand c'est fini, que cela te redonne la main sur ta page ?

Si c'est cela, je penses que tu peux utiliser AJAX pour déclencher ton upload.
Et pendant que ton upload se fait en asynchrone, tu peux faire afficher ta barre de progression.
Et quand ton upload est fini, ta fonction AJAX te rend la main et tu peux enlever ta barre de progression.

Je ne sais pas si tu as déjà fait de l'ajax, mais il y a de très bon framework javascript qui encapsule son utilisation comme dojo ou prtotype.
Attention toute fois avec prototype si tu utilises struts-layout, il y a des conflits entre les 2

j'espère que cela pourra t'aider.

[edogawa]

Merci CaptainCyd pour ta réponse, ce que tu as dit est bien ce que je veux.
mais, j'ai oublié de dire que je fais un controle sur mon form y compris le fichier que j'upload, si il y a une erreur je fais un getInputForward, pour afficher un message d'erreur dans ma page. Comment je vais utiliser Ajax, et comment je peux gérer mes erreurs?
et Merci encore.

[CaptainCyd]

je suis entrain de tester un bout de code qui je pense peut répondre à ton pb.

je le post demain matin une fois debugger

[CaptainCyd]

Bonjour edogawa,

comme promis, voici le bout de code.
Au niveau des tags, j'utilise struts-layout, avce struts 1.3.8.
Donc, convertit les tags de struts-layout en struts.

Alors, pour faire de l'Ajax, j'utilise le framework dojo que tu peux dld ici

Pour faire attendre, le meilleur moyen que j'ai trouvé est d'ouvrir une popup avec ton message.
La popup, en plus d'afficher ton message, va s'occuper d'interroger le serveur pour savoir si ton fichier est bien arriver sur le disque dur du serveur.

Dans ta page jsp qui contient le <html:file>, il faut que tu mettes le code suivant :

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
30
31
32
33
34
35
36
37
38
39
40
 
<script language="JavaScript" src="<layout:resource type="cfg" name="dojo.js"/>"></script>
<script language="javascript" type="text/javascript">
    	// charge les classes dont j'ai besoin
	    dojo.require("dojo.collections.ArrayList");
	    dojo.require("dojo.dom");
</script>
<script language="javascript" type="text/javascript">
 
	function testUpload(e) 
	{
		window.open("vues/popup.jsp","nom_popup","width=300, height=300");
		e.preventDefault();
		e.stopPropagation();
		setTimeout("valideSubmit()",5000);
    }
 
    function valideSubmit()
    {
    	with(document.drBean)
    	{
	    	submit();
    	}
    }
 
    function initTestUpload()
    {
        dojo.event.connect(dojo.byId("TEST_UPLOAD"), "onclick", "testUpload");
    }
 
    dojo.addOnLoad(initTestUpload);
</script>
 
<layout:form action="/demande" reqCode="loadDr" method="post" enctype="multipart/form-data">
	<layout:tabs styleClass="FORM" width="700" selectedTabKeyName="tabDrKey">
<layout:text property="uploaderFichier" styleId="uploaderFichier" mode="H,H,H"/>
 
<layout:file key="dr.suivie.fichier" fileKey="" property="drSuivieFichier" />
<layout:submit styleId="TEST_UPLOAD" reqCode="uploadFichier"/>
</layout:form>

Que fait ce bout de code
Ton fichier sera envoyé au serveur par un submit.
Donc, sur l'evt onclick du bouton submit on va faire les choses suivantes :
- l'action de ton submit est envoyé à une fonction bien précise à ta servlet qui est dérivé de DispatchAction, ici uploadFichier
- on arrête l'évènement submit
- on ouvre le popup
- on relance l'evenement submit au bout de 5 secondes pour laisser le temps au popup de s'ouvrir et de commencer son traitement
- on relance le submit

Tu remarqueras que j'ai mis un champ text invisible. C'est ce champ qui me servira à savoir qd mon fichier sera déposé sur le serveur par la mise à jour du bean par le serveur

Au niveau de ta servlet, la fonction uploadFichier va écrire ton fichier sur le serveur et mettre à jour la variable du bean : uploaderFichier

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
public ActionForward uploadFichier(ActionMapping mapping, ActionForm form, 
			 HttpServletRequest request, HttpServletResponse response) 
	throws ServletException, IOException
	{
		// init des variables
		DrBean db = (DrBean) form;
		db.setUploadFichier (1);
 
		FormFile file = db.getDrSuivieFichier();
		FileOutputStream fileOut = null;
		try 
		{
			fileOut = new FileOutputStream("c:/test.rar");
			fileOut.write(file.getFileData()); // fileData est un byte[]
			fileOut.flush();
			fileOut.close();
			fileOut = null;
		}
		catch (FileNotFoundException e)
		{
			e.printStackTrace();
		}
		catch (Exception e) 
		{
			e.printStackTrace();
		}
		finally
		{
			if(fileOut != null)
			{
				try
				{
					fileOut.close();
				}
				catch(IOException e)
				{
					e.printStackTrace();
				}
				fileOut = null;
			}
		}
 
		// fin du traitemen
		return mapping.findForward(<ma_page>);
	}

Tu peux très bien rajouter dans ce code un message à afficher s'il y a une erreur


Au niveau du popup maintenant, tu auras le code suivant :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-layout.tld" prefix="layout" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="JavaScript" src="<layout:resource type="cfg" name="dojo.js"/>"></script>
<script language="javascript" type="text/javascript">
    	// charge les classes dont j'ai besoin
	    dojo.require("dojo.collections.ArrayList");
	    dojo.require("dojo.dom");
</script>
 
<script language="javascript" type="text/javascript">
var myTimer;
 
 function Timer() {
        var kw = {
            url:    	"/DRDICT/demande.do",
            content:	{
							'reqCode' : 'testUploadAjax',
					  	},
			method: 	"POST", 
            load:    	function(type, data, evt) 
            			{ 
	            			if(evt.statusText == "OK")
	            			{
	                       		// init de mon objet XML
	                       		var objDom = dojo.dom.createDocumentFromText(data);
								var eltRoot = dojo.dom.getFirstChildElement(objDom,"ROOT");	
								var node = dojo.dom.getFirstChildElement(eltRoot,"upload");
								if(node.textContent != "ko")
									window.close();				
							};
                    	} 
        };   
        dojo.io.bind(kw);
        setTimeout("Timer()",1000);
   }
   Timer();
 
 
 
</script>
</head>
<body>
Upload en cours, veuillez patienter ...
</body>
</html>

Au chargement de la page, j'appelle la fonction Timer() qui va appelé une fonction du servlet via une requete http, ici testUploadAjax

La fonction testUploadAjax contient le code suivant :

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
30
31
32
33
34
35
36
37
38
39
40
 
public ActionForward testUploadAjax(ActionMapping mapping, ActionForm form, 
			 HttpServletRequest request, HttpServletResponse response) 
	throws ServletException, IOException
	{
		// init des variables
		this.initAjax(response);
		DrBean db = (DrBean) form;
 
		 // remplie mon xml
	    elt = strXJ.addElement(null, "upload");
		if(db.getUploaderFichier() == 1)
		{
			strXJ.adText(elt,"ok");
		}
		else
			strXJ.adText(elt,"ko");
 
		this.endAjax();
		return null;
	}
 
//	 fonction qui permet les variables nécessaire en fonctionnement AJAX
	private void initAjax(HttpServletResponse response) throws IOException, ServletException
	{
		// init des varaibles
		strXJ = new XML_JDom();
		elt = null;
 
		// prepare la reponse
		response.setContentType("text/html");
	    out = response.getWriter();
 
	}
 
	private void endAjax() throws IOException, ServletException
	{
		strXJ.getXML(out);
		out.close();
	}

Cette fonction va interroger la variable du bean uploaderFichier pour savoir si mon fichier a été déposé sur le serveur.
Elle écrit le resultat dans du XML.
Pour faire du XML, j'ai encapsulé la classe JDom.
Une fois mon xml généré, je le balance sur la sortie standard du serveur.

Quand ma fonction testUploadAjax a fini de s'executer, je reviens à mon javascript dans ma popup et je teste mon xml pour savoir s'il m'a renvoyé ok ou non.
Si j'ai ok, ma fenetre popup se ferme.

La page principale qui à fait l'upload du fichier va se recharger, et le tour est joué

J'espère que cela pourra t'aider

[edogawa]

Un grand merci CaptainCyd pour ton aide.