Support des modèles Office 2007/2010 dans Alfresco 3.4d (3ème partie)

Poursuivons nos travaux d’amélioration d’Alfresco Share 3.4 initiés dans les parties 1 et 2 avec le cas de l’upload de fichier Flash.
Dans la version standard, la sélection de fichiers depuis le composant Flash affiche quelque chose du genre :

Le composant de chargement Flash ne permet pas de visualiser les icônes des fichiers

Les icônes affichées à côté du nom du document sont définies à partir du modèle définis dans le fichier flash-upload.get.html.ftl (ligne 73) :

<img src="${url.context}/res/components/images/generic-file-32.png" class="fileupload-docImage-img" alt="file" />

On constate donc que c’est l’icône « générique » qui est spécifiée.

Ce template est utilisé pour chaque fichier ajouté à la liste d’import. Le code responsable de l’utilisation de ce template est disponible dans le fichier flash-upload.js (méthode _formatCellElements, ligne 1270).
On peut voir dans cette méthode que le contenu du template est modifié en JavaScript pour afficher, entre autres, le nom du fichier chargé. De là peut surgir l’idée d’application une modification à la volée pour modifier la source de l’image… et nous allons la mettre en œuvre ! Je précise que je ne suis pas spécialiste de JavaScript, donc l’adaptation du code ci-dessous pourrait être certainement améliorée, toutefois, l’opération proposée fonctionne parfaitement.

Première étape : créer notre propre fichier flash-upload.js en dupliquant l’original dans le dossier /extension/components/upload (il est également souhaitable de modifier le nom du fichier pour bien le différencier).

Deuxième étape : modifier le code JavaScript en injectant à la ligne 1281 le code qui suit.

var image = Dom.getElementsByClassName("fileupload-docImage-img", "img", templateInstance);
if (image.length == 1)
{
image[0].src = Alfresco.constants.URL_RESCONTEXT + 'components/images/filetypes/' + Alfresco.util.getFileIcon(record.name);
}

Ce code tout simple va modifier l’attribut src de l’image en utilisant notre désormais bien connue méthode Alfresco.util.getFileIcon.

Troisième étape : référencer tout cela dans le WebScript flash-upload
Il suffit de surcharger le fichier flash-upload.get.head.ftl en plaçant le nôtre dans le dossier shared/classes/alfresco/web-extension/org/alfresco/components/upload.
Et ce fichier va ressembler à cela :
<#include "../component.head.inc">

<@link rel="stylesheet" type="text/css" href="${page.url.context}/res/components/upload/flash-upload.css" />
<@script type="text/javascript" src="${page.url.context}/res/extension/js/alfresco-extension-template-office.js">
<@script type="text/javascript" src="${page.url.context}/res/extension/components/upload/alfresco-extension-flash-upload-file-icon.js">
Les modifications apportées sont :

• Suppression du chargement de flash-upload.js
• Ajout de notre script custom pour la gestion des modèles office
• Ajout de notre script custom pour afficher les icônes dans le composant de chargement flash

Et voila !
Un rechargement plus tard nous permet d’avoir :

C'est quand même plus joli avec une icône colorée !

Comme on peut le constater, notre extension fonctionne aussi pour les documents qui ne sont pas des modèles office
Je ne peux qu’espérer qu’Alfresco l’intègre nativement dans Share, comme j’en fais la proposition dans #ALF-9324.