UDA-Componentes RUP. Upload

UDA – Utilidades de desarrollo de aplicaciones by EJIE is licensed under a Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported License.

UDA - Utilidades de Desarrollo de Aplicaciones

Componentes RUP – Upload

Fecha: 27/06/2014 Referencia:

EJIE S.A.

Mediterráneo, 14

Tel. 945 01 73 00*

Fax. 945 01 73 01

01010 Vitoria-Gasteiz

Posta-kutxatila / Apartado: 809

01080 Vitoria-Gasteiz

www.ejie.es

Componentes RUP – Upload ii/26

Control de documentación

Título de documento: Componentes RUP – Upload

Histórico de versiones

Código: Versión: Fecha: Resumen de cambios:

1.0.0 14/12/2011 Primera versión.

1.2.1 15/02/2012 Correcciones y mejoras descriptivas.

2.0.0 11/07/2012

Adaptación del componente mediante la clase UdaMultipartResolver, a las mejoras de Spring 3.1.1.

Uso de la nueva configuración utilizada en UDA v2.0.0.

2.1.0 18/09/2012

Actualización de las versiones de las librerías JavaScript subyacentes.

Añadida información importante en el apartado integración con UDA.

2.4.0 22/11/2013 Se distribuye la versión minimizada de los ficheros javascript y de estilos de RUP.

2.4.2 27/06/2014 Integración con PIF

Cambios producidos desde la última versión

Integración con PIF

Control de difusión

Responsable: Ander Martínez

Aprobado por:

Firma: Fecha:

Distribución:

Referencias de archivo

Autor:

Componentes RUP – Upload iii/26

Nombre archivo:

Localización:

Contenido

Capítulo/sección Página

1. Introducción 5

2. Ejemplo 5

3. Casos de uso 5

4. Infraestructura 6

4.1. Ficheros 6

4.2. Dependencias 6

4.3. Versión minimizada 7

5. Invocación 7

5.1. Componente upload independiente 7

5.2. Componente upload integrado en formulario 10

5.3. Varios componentes upload integrados en formuario 11

6. Parámetros 13

7. Funciones 15

8. Eventos 16

9. Sobreescritura del theme 17

10. Interacción con el servidor de aplicaciones 18

11. Internet Explorer 8 22

12. Integración con UDA 23

Componentes RUP – Upload iv/26

13. Integración con PIF 23

13.1. Configuración 23

13.2. Invocación 25

Componentes RUP – Upload 5/26

1. Introducción

La descripción del Componente Upload , visto desde el punto de vista de RUP, es la siguiente:

Permite al usuario seleccionar uno o varios archivos de su equipo y subirlos a la aplicación.

2. Ejemplo

Se presentan a continuación un ejemplo de este componente:

3. Casos de uso

Se aconseja la utilización de este componente:

• Cuando sea necesario realizar una subida de archivos al servidor.


4. Infraestructura

A continuación se comenta la infraestructura necesaria para el correcto funcionamiento del componente.

• Únicamente se requiere la inclusión de los ficheros que implementan el componente (js y css) comentados en los apartados Ficheros y Dependencias.

4.1. Ficheros

Ruta Javascript: rup/scripts/

Fichero de plugin: rup.upload-x.y.z.js

Ruta theme: rup/basic-theme/

Fichero CSS del theme: theme.rup.upload-x.y.z.css

4.2. Dependencias

Por la naturaleza de desarrollo de los componentes (patrones) como plugins basados en la librería JavaScript jQuery , es necesaria la inclusión del esta. La versión elegida para el desarrollo ha sido la versión 1.8.0.

• jQuery 1.8.0: http://jquery.com/

La gestión de la ciertas partes visuales de los componentes, se han realizado mediante el plugin jQuery UI que se basa en jQuery y se utiliza para construir aplicaciones web altamente interactivas. Este plugin, proporciona abstracciones de bajo nivel de interacción y animación, efectos avanzados de alto nivel, componentes personalizables (estilos) ente otros. La versión utilizada en el desarrollo ha sido la 1.8.23.

• jQuery UI 1.8.23: http://jqueryui.com/

Las distintas funcionalidades que aporta el componente y las prestaciones generales del mismo, se apoyan en el plugin jQuery File Upload . Para el correcto funcionamiento del componente Upload, se precisa de la inclusión de dicho plugin.

• jQuery-File-Upload: http://blueimp.github.com/jQuery-File-Upload/

Los ficheros necesarios para el correcto funcionamiento del componente son:

• jquery-1.8.0.js

• jquery-ui-1.8.23.custom.js

• jquery-ui-1.8.23.custom.css

• jquery.fileupload.js

• jquery.fileupload-ui.js

• jquery.fileupload-ui.css

• jquery.xdr-transport.js

• jquery.iframe-transport.js


• rup.base-x.y.z.js

• rup.upload-x.y.z.js

• theme.rup.upload-x.y.z.css

4.3. Versión minimizada

A partir de la versión v2.4.0 se distribuye la versión minimizada de los componentes RUP. Estos ficheros contienen la versión compactada y minimizada de los ficheros javascript y de estilos necesarios para el uso de todos los compontente RUP.

Los ficheros minimizados de RUP son los siguientes:

• rup/scripts/min/rup.min-x.y.z.js

• rup/basic-theme/rup.min-x.y.z.css

Estos ficheros son los que deben utilizarse por las aplicaciones. Las versiones individuales de cada uno de los componentes solo deberán de emplearse en tareas de desarrollo o depuración.

5. Invocación

5.1. Componente upload independiente

Un escenario de uso del componente es en el que se necesita de un sistema de subida de archivos sin necesidad de gestionar otros datos no relacionados con los mismos.

Un ejemplo de la creación de un componente de upload independiente sería el siguiente:

Partiremos de la siguiente estructura implementada en la jsp:

<div id ="fileupload_only"> <form action ="../upload" id ="usuarioForm" enctype ="multipart/form-data"

method ="POST"> <div class ="fileupload-buttonbar">

<label for ="file_only">Ficheros: </ label > <input id ="file_only" type ="file" name="files[]"

multiple ="multiple"> <button type ="submit" class ="start">Subir todos </ button > <button type ="reset" class ="cancel">Cancelar todos </ button > <button type ="button" class ="delete">Eliminar todos </ button >

</ div > <div class ="fileupload-content">

<table class ="files"></ table > <div id ="fileupload-progressbar"

class ="fileupload-progressbar"></ div > </ div >

</ form > </div>


Esta estructura conforma la interfaz de usuario que se muestra al usuario para interactuar con el componente. Los elementos que la forman son los siguientes:

• Capa contenedora: Determina el elemento contenedor del resto que conforman el componente.

<div id ="fileupload_only"> <!—- Resto de contenido -->

</div>

• Formulario: Contiene los input file y botones utilizados para seleccionar los archivos a subir y realizar las acciones que permite el componente.

<form action ="../upload" id ="usuarioForm" enctype ="multipart/form-data"

method ="POST"> <!—- Contenido del formulario -->

</ form > Por defecto el componente toma los valores de las propiedades indicadas en el formulario como valores para realizar su configuración. Estos parámetros pueden ser modificados a la hora de crear el componente mediante sus propiedades de configuración. Las propiedades del formulario que afectan al componente son:

o action: Determina la url que va a ser utilizada para realizar la subida de ficheros. o method: Método http que va a ser utilizado en las peticiones al servidor de aplicaciones

para realizar la subida de archivos. o enctype: En caso de especificar esta propiedad con el valor multipart/form-data el

valor de la propiedad de configuración multipart se inicializará a true.

• Botonera: Incluye el campo file utilizado para seleccionar los ficheros así como los botones utilizados para gestionar la subida de ficheros. Esta botonera es identificada por el componente upload debido a que debe llevar en la propiedad class el valor fileupload-buttonbar entre los indicados.

<div class ="fileupload-buttonbar">

<label for ="file_only">Ficheros: </ label > <!—- Control file --> <input id ="file_only" type ="file" name="files[]"

multiple ="multiple">

<!—- Subida de todos los ficheros encolados --> <button type ="submit" class ="start">Subir todos </ button > <!—- Cancelar los ficheros encolados que no han sid o enviados --> <button type ="reset" class ="cancel">Cancelar todos </ button >


<!—- Eliminar todos los ficheros que han sido envia dos --> <button type ="button" class ="delete">Eliminar todos </ button >

</ div > Los elementos que forman la botonera son: o Campo file: Permite la selección de los ficheros por parte del usuario. El campo name determina

el nombre del parámetro de la petición en el cual se enviarán los ficheros. En caso de indicar la propiedad multiple ="multiple", el componente permitirá la selección de varios ficheros a la vez desde el diálogo de selección de archivos (Esta opción no está soportada en IE8).

<input id ="file_only" type ="file" name="files[]"

multiple ="multiple">

o Botón de subida de ficheros: Inicia la subida de todos los ficheros presentes en la lista de

ficheros seleccionados. El botón es identificado por el componente mediante el valor start indicado en la propiedad class .

<button type ="submit" class ="start">Subir todos </ button >

o Botón de cancelar subida: Cancela la subida de todos los ficheros presentes en la lista de ficheros seleccionados que no hayan sido enviados. El botón es identificado por el componente mediante el valor cancel indicado en la propiedad class .

<button type ="reset" class ="cancel">Cancelar todos </ button >

o Botón de eliminar todos los ficheros: Eliminar los ficheros presentes en la lista de ficheros seleccionados que han sido subidos al servidor. El botón es identificado por el componente mediante el valor delete indicado en la propiedad class .

<button type ="button" class ="delete">Eliminar todos </ button >

La presencia de estos botones es opcional, por lo que su uso queda sujeto a las necesidades funcionales de la aplicación que deban ser cubiertas.

• Lista de ficheros: Contiene la lista de ficheros que han sido seleccionados por el usuario. La lista

es identificada por el componente mediante el valor fileupload-content presente en la propiedad class . Desde cada una de las entradas que muestra se permite al usuario interactual con cada uno de los ficheros. De este modo permite:

o Realizar una subida independiente de un fichero. o Cancelar un fichero concreto. o Eliminar un fichero concreto que haya sido subido. o Mostrar información relacionada del fichero. o Mostrar una barra de progreso de la subida para cada uno de los ficheros.

<div class ="fileupload-content">

<table class ="files"></ table > <div id ="fileupload-progressbar"


A su vez, la lista de ficheros contiene los siguientes elementos.


o Tabla de contenido: Contiene una línea por cada uno de los ficheros que han sido

seleccionados por el usuario. Se identifica mediante el valor files en la propiedad class.

<table class ="files"></ table >

o Barra de progreso global: Se permite especificar una barra de progreso global para el envío de todos los ficheros agregados a la lista. Se identifica mediante el valor fileupload-progressbar en la propiedad class . <div id ="fileupload-progressbar"

class ="fileupload-progressbar"></ div >

NOTA: El componente upload es capaz de enviar junto con la petición de subida de un archivo, los campos que hayan sido incluidos dentro del formulario. Estos cambos se enviarán como parámetros en cada una de las peticiones al servidor de aplicaciones.

La invocación del componente se realizará mediante un selector que indicará el div en el cual se encuentran todos los elementos que forman la interfaz del componente upload.

$( '#fileupload_only' ).rup_upload({

fileInput: $( "#file_only" ), maxFileSize: 5000000

});

Donde el parámetro “properties” es un objeto ( var properties = {}; ) o bien directamente la declaración de lo valores directamente. Sus posibles valores se detallan en el apartado 6.

5.2. Componente upload integrado en formulario

Como se ha comentado anteriormente el componente es capaz de enviar en cada petición de subida de archivos, la información existente en otros campos existentes en el formulario.

Sin embargo, es posible que se requiera el envío de los ficheros junto con los campos del formulario mediante un submit http del formulario. Esto plantea el problema de que únicamente se enviará un fichero por cada compo de tipo file existente en el formulario. De este modo no se puede utilizar la lista de ficheros para su envío.

Sin embargo el componente puede ser utilizado para funcionar en este escenario, a pesar de que no se puedan utilizar la mayoría de sus funcionalidades. Su uso queda limitado a mostrar información del fichero así como de presentar controles para cancelar el archivo seleccionado.

Este sería un ejemplo de la estructura que se debería de generar en la jsp:

<div id ="fileupload_form">

<form action ="../upload" id ="usuarioForm" enctype ="multipart/form-data" method ="POST">

<div class ="formulario_linea_izda_float"> <label id ="label_nombre" for ="nombre" >Nombre : </ label > <input id ="nombre" name="nombre" />


</ div > <div class ="formulario_linea_izda_float"> <label id ="label_apellido1"

for ="apellido1" >Apellido 1: </ label > <input id ="apellido1" name="apellido1" /> </ div > <div class ="formulario_linea_izda_float"> <label id ="label_apellido2"

for ="apellido2" >Apellido 2: </ label > <input id ="apellido2" name="apellido2" /> </ div >

<div class ="fileupload-buttonbar">

<label for ="file_only">Fichero: </ label > <input id ="file_form " type ="file" name="files[]"/ >

</ div > <div class ="fileupload-content">

<table class ="files"></ table > </ div > <div class ="formulario_columna_cnt">

<button id ="sendButton" type ="submit" class ="start"> Enviar formulario </ button >

</ div > </ form > </div>

Y la invocación del componente sería:

$( '#fileupload_form' ).rup_upload({ fileInput: $( "#file_form" ), maxFileSize: 5000000, submitInForm:true

});

Como se puede comprobar, se ha indicado la opción submitInForm con el valor true. Esto indica al componente que debe de configurarse para funcionar del modo que hemos comentado en este apartado.

5.3. Varios componentes upload integrados en formua rio

Este escenario es básicamente una extensión el definido en el apartado anterior. En este caso se definirán dos componentes upload independientes incluidos en el mismo formulario. Como es los casos anteriores, a continuación se muestra la estructura incluida en la jsp:

<div id ="fileupload_form"> <form action ="../upload" id ="usuarioForm" enctype ="multipart/form-data"

method ="POST">

<div class ="formulario_linea_izda_float">


<label id ="label_nombre" for ="nombre" >Nombre : </ label > <input id ="nombre" name="nombre" /> </ div > <div class ="formulario_linea_izda_float"> <label id ="label_apellido1"

for ="apellido1" >Apellido 1: </ label > <input id ="apellido1" name="apellido1" /> </ div > <div class ="formulario_linea_izda_float"> <label id ="label_apellido2"

for ="apellido2" >Apellido 2: </ label > <input id ="apellido2" name="apellido2" /> </ div >

<div class ="formulario_linea_izda_float"> 

<div id="fileupload_file_form_padre" > <div class="fileupload-buttonbar"> <label for="file">Foto padre: </label> <input id="file_form_padre" type="file"

name="fotoPadre"> </div> <div class="fileupload-content"> <table class="files"></table> </div>  <div id="fileupload_file_form_madre"> <div class="fileupload-buttonbar"> <label for="file">Foto madre: </label> <input id="file_form_madre" type="file"

name="fotoMadre"> </div> <div class="fileupload-content"> <table class="files"></table> </div> </div>

</ div > <div class ="formulario_columna_cnt">

<button id ="sendButton" type ="submit" class ="start"> Enviar formulario </ button >

</ div > </ form > </div>

Por su parte la invocación de los componentes serían:

$( '#fileupload_file_form_padre' ).rup_upload({


form:"usuarioForm", fileInput: $( "#file_form_padre" ), submitInForm:true }); $( '#fileupload_file_form_madre' ).rup_upload({ form:"usuarioForm", fileInput: $( "#file_form_madre" ),, submitInForm:true

});

En este caso además de indicar la propiedad submitInForm, se deberá de indicar en la propiedad form el identificador del formulario que contiene los campos file.

6. Parámetros

A continuación se muestran los posibles parámetros de configuración que recibe el componente.

• namespace: Se utiliza para asociar el capturador de eventos del dropZone y del fileInpurt. Por defecto toma el valor del widget (“fileupload”).

• dropZone: Indica el objeto jQuery que representa el área de dropZone. Por defecto el valor es $(document). Para deshabilitar el soporte drag & drop se deberá indicar el valor null.

• fileInput: Objeto jQuery sobre el cual se monitorizarán los eventos de cambio del mismo. En caso de no especificarse se tomarán los input de tipo file existentes dentro del objeto sobre el que se ha creado el componente upload. Para deshabilitar el capturador de eventos se deberá indicar el valor null.

• replaceFileInput: Determinar si el campo file es reemplazado por un nuevo objeto a partir de un clone. Por defecto el valor es true.

• paramName: Indica el nombre del parámetro de la request mediante el cual se enviará la información del fichero. En caso de no especificarse, se tomará el valor de la propiedad name del campo file. En caso de no especificarse dicha propiedad se tomará el valor files[] por defecto.

• singleFileUploads: Especifica si la subida de ficheros se realizar de manera individual, es decir, si se realiza una petición XHR por cada uno de los ficheros que se deben de enviar. Por defecto el valor es true.

• limitMultiFileUploads: Especifica el número de ficheros que pueden ser enviados en una única petición XHR. Esta opción es ignorada si la opción singleFileUploads está a true.

• sequentialUploads: Especifica si el envío de los ficheros se realizan de manera secuencial en vez de manera simultánea. Por defecto false.


• limitConcurrentUploads: Indica el número máximo de peticiones concurrentes para la subida de ficheros.

• forceIframeTransport: Determina si se debe forzar el uso de iframe al realizar la subida de ficheros. Esta opción puede ser útil en caso de subida de ficheros entre diferentes dominios. Por defecto su valor es false.

• multipart: Indica si la subida de ficheros se realiza como multipart/form-data. Por defecto el valor es true.

• recalculateProgress: Por defecto, los envíos de ficheros erróneos o cancelados son excluidos del cálculo del progreso global de subida de ficheros. Para evitar el recálculo del progreso global se deberá de especificar esta opción como false. Por defecto el valor es true.

• formData: Información adicional que se desea enviar al realizarse la subida de ficheros. El parámetro acepta lo siguiente:

o Array de objetos con propiedades nombre-valor.

o Objeto simple

o Función que retorna uno de los tipos de datos especificados anteriormente.


7. Funciones

A continuación se detallan las diferentes funciones que integran el componente Combo:

• enable: habilita el componente upload. La invocación se realizará de la siguiente manera:

$( selector ) .rup_upload ( "enable" );

• disable: deshabilita el componente upload. La invocación se realizará de la siguiente manera:

$( selector ) .rup_upload ( "disable" );

• destroy: elimina los objetos jQuery asociados al elemento identificado por el selector, durante el proceso de creación del componente upload:

$( selector ) .rup_combo ( "destroy" );


8. Eventos

A continuación se detallan los eventos asociados al componente:

• add: permite asociar una función que se ejecutará cuando se añada un fichero mediante el componente. muestre el desplegable del combo. Se configura de la siguiente manera:

• submit: permite asociar una función que se ejecutará al ejecutarse el evento submit del envío de cada fichero. Si la función retorna false el envío no se realiza.

• send: permite asociar una función que se ejecutará al iniciarse el envío de cada fichero. Si la función retorna false se abortará el envío.

• done: permite asociar una función que se ejecutará al realizarse de manera satisfactoria el envío de los ficheros.

• fail: permite asociar una función que se ejecutará al producirse un error en el envío de los ficheros o al abortarse el envío,

• always: permite asociar una función que se ejecutará al producirse un envío correcto, erróneo o se aborte.

• progress: permite asociar una función que se ejecutará al producirse un evento relacionado con el indicador de progreso del envío de ficheros.

• progressall: permite asociar una función que se ejecutará al producirse un evento relacionado el indicador de progreso global de envío de ficheros.

• start: permite asociar una función que se ejecutará al inicio del envío de los ficheros.

• stop: permite asociar una función que se ejecutará al detenerse el proceso de envío de ficheros.

Para asociar funciones a los eventos es recomendable realizarlo mediante el método bind. De este modo se mantendrán las funciones asociadas internamente por el plugin subyacente a los eventos.

$( '#fileupload' ) .bind( 'fileuploadadd' , function (e, data) { /* ... */ }) .bind( 'fileuploadsubmit' , function (e, data) { /* ... */ }) .bind( 'fileuploadsend' , function (e, data) { /* ... */ }) .bind( 'fileuploaddone' , function (e, data) { /* ... */ }) .bind( 'fileuploadfail' , function (e, data) { /* ... */ }) .bind( 'fileuploadalways' , function (e, data) { /* ... */ }) .bind( 'fileuploadprogress' , function (e, data) { /* ... */ }) .bind( 'fileuploadprogressall' , function (e, data) { /* ... */ }) .bind( 'fileuploadstart' , function (e) { /* ... */ }) .bind( 'fileuploadstop' , function (e) { /* ... */ }) .bind( 'fileuploadchange' , function (e, data) { /* ... */ }) .bind( 'fileuploadpaste' , function (e, data) { /* ... */ }) .bind( 'fileuploaddrop' , function (e, data) { /* ... */ }) .bind( 'fileuploaddragover' , function (e) { /* ... */ });


9. Sobreescritura del theme

El componente upload se presenta con una apariencia visual definida en el fichero de estilos theme.rup.upload-x.y.z.css.

Si se quiere modificar la apariencia del componente, se recomienda redefinir el/los estilos necesarios en un fichero de estilos propio de la aplicación situado dentro del proyecto de estáticos (codAppStatics/WebContent/codApp/styles).

Los estilos del componente se basan en los estilos básicos de los widgets de jQuery UI, con lo que los cambios que se realicen sobre su fichero de estilos manualmente o mediante el uso de la herramienta Theme Roller podrán tener repercusión sobre todos los componentes que compartan esos mismos estilos (pudiendo ser el nivel de repercusión general o ajustado a un subconjunto de componentes).


10. Interacción con el servidor de aplicaciones

En este apartado se va a detallar como realizar la comunicación entre el componente RUP y el servidor de aplicaciones.

Por defecto Spring no tiene habilitada la gestión de subidas de ficheros (multipart).

Para habilitarlo se debe de añadir un MultipartResolver al contexto de aplicación de Spring. Esto se realiza editando la configuración del fichero mvc.config.xml e incluyendo la siguiente definición:

<bean id ="multipartResolver" class ="com.ejie.x38.util.UdaMultipartResolver">  <property name="maxUploadSize" value ="10000000"/> </ bean > Desde UDA se proporciona un MultipartResolver que permite el envío de peticiones multipart mediante PUT.

La configuración del MultipartResolver se realiza mediante las siguientes propiedades:

• maxUploadSize : Tamaño máximo del archivo que se permite subir al servidor.

• maxInMemorySize : Tamaño máximo permitido en memoria antes de que el fichero sea escrito a disco.

• defaultEncoding : Encoding utilizado por defecto.

Es necesario indicar que para el correcto funcionamiento del componente, una vez se ha realizado correctamente la subida del fichero, el componente debe de recibir del servidor un objeto json con información referente al fichero.

En concreto, los parámetros que deben indicarse en el fichero json son los siguientes:

• url: Url utilizada para descargar el fichero enviado.

• name: Nombre del fichero.

• type: Tipo del fichero.

• size: Tamaño del fichero, en bytes.

• delete_url: Url utilizada para realizar el borrado del fichero enviado.

• delete_type: Método http utilizado en la petición de borrado.

Un ejemplo del objeto json seria el siguiente:

[{ "delete_url":"../upload?fileName=Puesta de sol.jp g",


"delete_type":"DELETE", "name":"Puesta de sol.jpg", "type":"image/jpeg", "url":"../upload?fileName=Puesta de sol.jpg", "size":71189 }]

Para simplificar esta generación del objeto json se puede implementar un método similar al siguiente (este método se utilizará en los siguientes ejemplos:

private Map<String,Object> getFileReturnMap(MultipartFile file){

Map<String,Object> mapaRetorno = new HashMap<String, Object>(); mapaRetorno.put( "url" , "../upload?fileName=" +file.getOriginalFilename()); mapaRetorno.put( "name" , file.getOriginalFilename()); mapaRetorno.put( "type" , file.getContentType()); mapaRetorno.put( "size" , file.getSize()); mapaRetorno.put( "delete_url" , "../upload?fileName=" +file.getOriginalFilename()); mapaRetorno.put( "delete_type" , "DELETE" ); return mapaRetorno;

}

A continuación se va a describir, para cada una de las acciones que el componente upload realiza sobre los ficheros, ejemplos de la configuración e implementación que ha de llevarse a cabo:

• Subida de un archivo: El componente realiza la subida de un archivo al servidor. Para el ejemplo, vamos a suponer la siguiente configuración.

o Método http: POST

o Url: ./upload

o Name del campo file: fichero

Esta sería la estructura indicada en la jsp para definir el componente:

<div id ="fileupload_only"> <form action ="./upload" id ="usuarioForm" enctype ="multipart/form-

data" method ="POST"> <div class ="fileupload-buttonbar">

<label for ="file_only">Ficheros: </ label > <input id ="file_only" type ="file" name="fichero"

multiple ="multiple"> <button type ="submit" class ="start">Subir todos </ button > <button type ="reset" class ="cancel">Cancelar

todos </ button > <button type ="button" class ="delete">Eliminar

todos </ button > </ div >


<div class ="fileupload-content"> <table class ="files"></ table > <div id ="fileupload-progressbar"


</ form > </div>

Un ejemplo del método del controler que escucha la petición de subida de fichero sería el siguiente:

@RequestMapping (method = RequestMethod. POST) public @ResponseBody List<Map<String, Object>> add(

@RequestParam(value= "files[]" , required= false) MultipartFile file, HttpServletResponse response, HttpServletRequ est request) {

uploadService .saveToDisk(file, URL_UPLOAD_BASE_DIR); List<Map<String,Object>> filesMetaInfo = new

ArrayList<Map<String,Object>>(); filesMetaInfo.add( this.getFileReturnMap(file)); return filesMetaInfo;

}

• Descarga de un archivo: El componente realiza una petición para que el usuario pueda descargarse el fichero que ha subido.

@RequestMapping (method = RequestMethod. GET) @ResponseStatus (HttpStatus. OK) public ModelAndView download( @RequestParam(value= "fileName" ) String

fileName, HttpServletResponse response) throws Exception {

File file = uploadService .getFromDisk( URL_UPLOAD_BASE_DIR, fileName);

byte[] fileByteArray = FileUtils. readFileToByteArray(file); response.setContentLength(fileByteArray. length ); FileCopyUtils. copy(fileByteArray, response.getOutputStream()); return null;

}

• Borrado de un archivo: El componente realiza una petición para eliminar el fichero que ha sido subido.

@RequestMapping (value= "{fileName}" ,method = RequestMethod. DELETE)

@ResponseStatus ( HttpStatus. OK ) public void remove( @RequestParam(value= "fileName" ) String fileName, HttpServletResponse response) {


uploadService .deleteFromDisk( URL_UPLOAD_BASE_DIR, fileName); }


11. Internet Explorer 8

El componente upload presenta varias particularidades al ser utilizado desde Internet Explorer 8. Estas son debidas a ciertas carencias del navegador. Estos son los aspectos a tener en cuenta sobre el uso del navegador:

• No se permite selección múltiple: IE8 no permite la selección de múltiples ficheros desde el díalogo que abre el campo file.

• No se permite la subida de ficheros por XHR: IE8 no permite la subida de ficheros a través de

una petición XHR. Debido a esto el componente automáticamente realiza la subida del fichero mediante iframe.

Esta limitación ocasiona el problema de que el iframe no acepta como respuesta una de tipo application/json, sino que debe ser text/plain o text/html. Para poder utilizar jackson en la respuesta al subir un archivo al servidor es necesario realizar una modificación en la configuración del mismo en el fichero jackson-config.xml.

<bean id ="udaMappingJacksonHttpMessageConverter" class ="com.ejie.x38.serialization.UdaMappingJacksonHttpMessageConverter"> <property name="supportedMediaTypes" ref ="jacksonSupportedMediaTypes" /> <property name="udaModule" ref ="udaModule" /> </ bean > <util:list id="jacksonSupportedMediaTypes"> <bean class="org.springframework.http.MediaType"> <constructor-arg value="text" /> <constructor-arg value="plain" /> <constructor-arg value="#{T(org.springframework.http.converter.json.MappingJacksonHttpMessageConverter).DEFAULT_CHARSET}" /> </bean> <bean class="org.springframework.http.MediaType"> <constructor-arg value="application" /> <constructor-arg value="json" /> <constructor-arg value="#{T(org.springframework.http.converter.json.MappingJacksonHttpMessageConverter).DEFAULT_CHARSET}" /> </bean> </util:list>

Mediante esta configuración, jackson enviará las respuestas en formato text/plain en los casos en los que no se acepte las de tipo application/json.


• No se muestra la información completa del fichero: Al añadir un fichero a la lista de archivos seleccionados, no se muestra el tipo de archivo ni el tamaño del mismo. Esto es debido a que IE8 no es capaz de acceder a estos metadatos del archivo seleccionado.

12. Integración con UDA

IMPORTANTE: En el caso de utilizar el navegador Int ernet Explorer 8, la subida de ficheros mediante un formulario se realiza mediante el uso de iframe. Esto es debido a que la subida de ficheros mediante peticiones AJAX no está soportada en este navegador.

La configuración que se ha de realizar para permiti r la interacción correcta entre los iframes y el resto de la infraestructura (request mappings, http error code, validaciones…) se detalla en el anexo Anexo-Emulacion_xhr_iframes.doc

13. Integración con PIF

A partir de la versión v2.4.2 del componente se ha mejorado la integración con el PIF permitiendo una subida directa. El objetivo es facilitar al desarrollador el realizar subidas de ficheros al PIF mediante el componente RUP Upload sin necesidad de implementar código propio. Por este motivo, se proporcionan desde la x38 una serie de clases que implementan la integración con el PIF de modo que la gestión sea transparente para el usuario final. El uso de estas clases implica una configuración mínima en la aplicación pero proporcionan las siguientes características.

• La subida al PIF se realiza mediante streaming, por lo que el fichero no se almacena en memoria del servidor de la aplicación.

• Al realizarse las peticiones del componente RUP upload sobre la propia aplicación, se eliminan los problemas derivados de peticiones cross domain.

A continuación se explica los pasos a seguir para configurar los diferentes componentes en la aplicación.

13.1. Configuración

Para hacer uso de la subida directa al PIF desde la aplicación se debe de realizar la siguiente configuración en la aplicación:

• Añadir la dependencia en el pom.xml

Se debe de incluir en el fichero pom.xml la siguiente dependencia: [pom.xml] <properties >


 <com.ejie.x38.version >2.4.2-RELEASE </ com.ejie.x38.version > </ properties > <dependency >

<groupId >com.ejie.x38 </ groupId > <artifactId >x38ShLibClasses-pif </ artifactId > <version >${com.ejie.x38.version} </ version > </ dependency >

• Añadir la definición del servlet encargado de procesar las peticiones que la aplicación realiza para subir ficheros al PIF:

[web.xml]  <servlet > <description ></ description > <display-name >pifServlet </ display-name > <servlet-name >pifServlet </ servlet-name > <servlet-class >org.springframework.web.context.support.HttpRequest HandlerServlet </ servlet-class > </ servlet > <servlet-mapping > <servlet-name >pifServlet </ servlet-name > <url-pattern >/pifServlet/* </ url-pattern > </ servlet-mapping >

• Crear el fichero pif-config.xml:

La definición de los beans de Spring encargados de gestionar las peticiones se realizan en un nuevo fichero pif-config. El contenido del fichero será el siguiente:

[pif-config.xml] <?xml version ="1.0" encoding ="UTF-8"?> <beans xmlns ="http://www.springframework.org/schema/beans" xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance" xmlns:util ="http://www.springframework.org/schema/util" xmlns:jee ="http://www.springframework.org/schema/jee" xmlns:context ="http://www.springframework.org/schema/context" xsi:schemaLocation ="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd http://www.springframework.org/schema/util http://www.springframework.org/schema/util/spring-util-3.1.xsd http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">


 <bean id ="pifServlet" class ="com.ejie.x38.pif.PifSpringServlet"> </ bean >

</ beans >

• Modificar el fichero app-config.xml

Se deberá de incluir en dicho fichero la referencia al nuevo fichero de configuración pif-config.xml.

[app-config.xml] <?xml version ="1.0" encoding ="UTF-8"?> <beans xmlns ="http://www.springframework.org/schema/beans" xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance" xmlns:p ="http://www.springframework.org/schema/p" xmlns:aop ="http://www.springframework.org/schema/aop" xmlns:context ="http://www.springframework.org/schema/context" xmlns:jee ="http://www.springframework.org/schema/jee" xmlns:tx ="http://www.springframework.org/schema/tx" xmlns:task ="http://www.springframework.org/schema/task" xsi:schemaLocation =" http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.1.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.1.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd http://www.springframework.org/schema/jee http://www.springframework.org/schema/jee/spring-jee-3.1.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.1.xsd http://www.springframework.org/schema/task http://www.springframework.org/schema/task/spring-task-3.1.xsd"> <import resource ="jackson-config.xml" /> <import resource ="validation-config.xml"/> <import resource ="mvc-config.xml" /> <import resource ="log-config.xml"/> <import resource ="security-core-config.xml"/> <import resource ="security-config.xml"/> <import resource="pif-config.xml"/> </ beans >

13.2. Invocación

La invocación del componente se realiza del mismo modo que se indica en el apartado “5.1 -Invocación”.


La única diferencia radica en las propiedades de configuración con las que se inicializa el componente. Para hacer uso de la subida directa al PIF, se deberá de:

• Incluir la configuración necesaria dentro de la propiedad pif. • Especificar en la propiedad url la correspondiente al configurado para el servlet.

Un ejemplo de invocación sería el siguiente: $( '#fileupload_pif_form' ).rup_upload({ fileInput: $( "#file_pif_form" ), url: "../pifServlet", pif:{ folderPath: "/x21a", fileTtl: 60, preserveName:true } }); Las propiedades posibles de configuración son las siguientes:

• url : Se deberá de indicar la url en la que escucha el servlet pifServlet.

• folderPath : Zona de aplicación donde se quiere subir el fichero.

• fileTtl : Número de segundos que se desea mantener el fichero en el repositorio. Como máximo se podrá fijar el número de segundos de 15 días naturales

• preserveName : Indica si se desea preservar el nombre del fichero en la ruta seleccionada sobrescribiendo el fichero si existiera. Si se decide no preservar los nombres lo que se hace es concatenarle una serie de dígitos que lo hace único en el repositorio. Indicar true en caso de requerirlo.

• securityToken : Determina si se va a utilizar un token de aplicación o de la sesión de XLNets iniciada por el usuario. Los valores posibles son “app” o “user”. (Por defecto “app”)

Technology

UDA-Componentes RUP. Upload