Le blog

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 :

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:

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

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

Et voilà !