miércoles, 10 de octubre de 2012

Upload de Imagenes con Primefaces 3.2 en Glassfish 3.1.2.2

Actualmente me encuentro desarrollando un sistema web y entre los tantos requerimientos del mismo, está el upload de imagenes al servidor. En sí el procedimiento no es complejo, pero ante la escueta documentación que brinda Primefaces con los pasos para lograrlo, he decidido escribir éste post para que quien se halle en ésta necesidad lo haga sin dar tantas vueltas.
Para subir imagenes a un servidor existen dos estrategias: guardar las imagenes (o archivos en general) directamente en una base de datos ó usar una carpeta en el servidor que aloje nuestros archivos. Aquí explico la segunda estrategia.
Para lograrlo se deben seguir los siguientes pasos.
1) Habiendo creando un proyecto web que incluya a Primefaces como la librería de componentes para JSF, como primer paso debemos descargar las siguientes librerías commons-fileupload.jar y commons-io.jar e incluirlas en el proyecto.
2) Debemos añadir el siguiente código al archivo web.xml
3) Necesitamos crean un controlador que gestione el proceso en sí de upload de archivos
Nótese el uso que hago de la ruta /upload indicando el destino (dentro del servidor) donde se guaradarán las imagenes. Esta estrategia permitirá guardar las imagenes en una carpeta fija en el servidor, con la ventaja de que el contenido de dicha carpeta no se verá alterada al hacer deploy (ya que si guardamos en alguna carepta como WEB-INF/resources/images) al hacer un redeploy de la aplicación, las imagenes al no ser parte del war original se eliminarían inmediatamente. Para configurar ésto, en el archivo WEB-INF/glassfish-web.xml añadimos el siguiente código:

Adicionalmente en nuestro servidor debe existir la siguiente gerarquía de carpetas que coincidan con la configuración que acabamos de realizar anteriormente:

4) Finalmente desde la vista tenemos que invocar al componente fileUpload de Primefaces, para gestionar la subida de archivos:
Tómese en cuenta que el atributo enctype="multipart/form-data" del formulario es obligatorio. Así mismo tómese en cuenta la versatilidad del componente fileUpload al ser ampliamente configirable con atributos como: mode, update, auto, etc.
Para éste caso puntual, el formulario de mi aplicación con el componente file Upload luce así:

Obviamente al hacer clic sobre el componente fileUpload de manera automaticamente una ventana que permita seleccionar la imagen se abrirá:

Y nuestra aplicación ya guarda las imagenes en la ruta que habiamos predefinido como lugar de almacenaje de archivs de imagen, indistintamente de que se haga deploy de la aplición:

Así mismo si queremos recuperar las imagenes guardadas, lo hacemos con el siguiente código:
Lo cual brindaré un resultado como el siguiente:

3 comentarios:

martosfre dijo...

Muy buen post Santi!! Un abrazo.

juancupa dijo...

Buenas como vamos
bueno su aporte
tengo un problema cuando adiciono en web.xml la parte de codigo

thresholdSize
51200




uploadDirectory
/upload




me genera error

gracias de antemano

Santiago Tapia dijo...

Saludos Juan, gracias por leer el blog. En cuanto a tu pregunta no olvides que debes indicar la ubicación dentro del servidor donde se guaradarán las imagenes, para eso debes crear el archivo: WEB-INF/glassfish-web.xml con la linea de código que menciono en el post, adicionalmente debes crear manualmente la gerarquia de carpetas que contendran las imagenes, para mi caso: C:\Archivos de programa\glassfish-3.1.2.2\glassfish\domains\domain1\var\webapp\upload

NOTA: Esta configuración anterior es específica pa glassfish y podría hacerse por la consola de administración pero en mi opinión como lo muestro en el post es mas sencillo creando el archivo glassfish-web.xml

con esa consideración asumo que todo funcionará perfecto. :) Un abrazo