XPages – Modifier le composant FileUpload pour remplacer une pièce jointe

XPages_Logo

Dans cet article, je vais vous présenter la solution à mettre en place pour répondre à l'une des problématiques les plus courante dans la gestion des pièces-jointes via les XPages : permettre à un utilisateur d'importer un fichier en remplacement d'un autre.

Le cas le plus typique : Gérer en paramètres le logo d'une application

Pour gérer ce paramètre créons la page suivante :

XPages_Art_Gestion_PJ_001

Le code de la page est le suivant:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xp_1="http://www.ibm.com/xsp/coreex">
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="PRM"></xp:dominoDocument>
	</xp:this.data>
	<xp:table border="0" style="margin-left:5%" >
		<xp:tr style="font-size:18pt">
			<xp:td colspan="2">
				<H3>
					<xp:label id="label2" value="Gestion du logo">
					</xp:label>
				</H3>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td colspan="2">
				<hr />
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td style="width:150px">
				<xp:label id="label1" value="Sélectionner,une Image"></xp:label>
			</xp:td>
			<xp:td >
				<xp:fileUpload id="fileUpload1" value="#{document1.Logo}">
					<xp:eventHandler event="onchange" submit="true" refreshMode="complete">
					</xp:eventHandler></xp:fileUpload>
			</xp:td>
		</xp:tr>
		<xp:tr>
			<xp:td>
				<xp:label id="label3"
					value="Liste  des pièces jointes">
				</xp:label>
			</xp:td>
			<xp:td>
				<xp:fileDownload rows="30" id="fileDownload1" displayLastModified="false" allowDelete="true" value="#{document1.Logo}">
				</xp:fileDownload>
			</xp:td>
		</xp:tr>
	</xp:table>
</xp:view>

Le champ qui va contenir les fichiers est arbitrairement appelé 'Logo'

Pour permettre le chargement d'une pièce jointe, on utilise le composant standard "fileUpload".

Ce composant est associé au champ logo. A noter que l'on force le rechargement de la page dès qu'un fichier a été chargé.

Pour permettre de connaitre les fichiers déjà chargés dans le champ logo, on utilise le composant "fileDownload".

Chargeons un premier fichier dans notre document:

XPages_Art_Gestion_PJ_002

Jusqu'ici tout va bien. Si nous chargeons un second fichier, le premier fichier n'est pas remplacé et le second est ajouté à la liste

XPages_Art_Gestion_PJ_003

Dans le cas de notre gestion de logo, un seul fichier ne devrait pas être permis. Il faut donc lorsque l'on charge un fichier supprimer les fichiers déjà uploadés et ne conserver que celui qui vient d'être chargé.

Pour cela nous allons utiliser une propriété intéressante des fichiers joins : l'état du fichier via la propriété getState()

Si la valeur de getState() est 0 alors cela signifie que le fichier est déjà présent dans le document. Sinon, c'est un nouveau fichier qui vient d'être chargé. Il suffit donc de boucler sur la liste des fichiers du champ Logo pour supprimer les anciens fichiers.

Pour une expérience utilisateur avancée, nous allons effectuer ce traitement de suppression dès la sélection d'un fichier. On va donc coder l'évènement onClick du composant fileUpload comme suit :

// récupération des fichiers du champ 'Logo'
var attList = document1.getAttachmentList('Logo');

// on boucle
for(var i=0; i<attList.size(); i++) {
	var att = attList.get(i);

	if (att.getState()==0) {
		 //INDOCUMENT: C'est un fichier existant : on le supprime
	  	print ("Remove " + att.getName())
		document1.removeAttachment('Logo', att.getName() );
	} else if (att.getState()==1) {
		//ADDED: C'est le fichier qui vient d'être chargé, on le garde           
	  	print ("Leave " + att.getName())
	} 
}
// on sauvegarde ensuite le document
try {
	document1.save()
} catch (e) { 
	print (e) 
} 
return true
}

une fois les fichiers supprimés, il suffit de sauvegarder le document Notes sous-jacent pour actualiser la sélection

XPages_Art_Gestion_PJ_004

Et voilà !

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.