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.
<!—- 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.
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.
<!—- Control file -->
<!—- Subida de todos los ficheros encolados -->
<!—- Cancelar los ficheros encolados que no han sido enviados -->

<!—- Eliminar todos los ficheros que han sido enviados -->
</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).
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.
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.
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.
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>
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.
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.
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">
method="POST">
<div class="formulario_linea_izda_float">
<label id="label_nombre" for="nombre" >Nombre :</label>
<input id="nombre" name="nombre" />

</div>
<label id="label_apellido1"
for="apellido1" >Apellido 1:</label>
<input id="apellido1" name="apellido1" />
</div>
</div>
<label for="file_only">Fichero: </label>
<input id="file_form" type="file" name="files[]"/>
</div>
</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 formuario
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">
method="POST">

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

<div id="fileupload_file_form_padre" >
<label for="file">Foto padre: </label>
<input id="file_form_padre" type="file"
name="fotoPadre">
</div>
</div>

<div id="fileupload_file_form_madre">
<label for="file">Foto madre: </label>
<input id="file_form_madre" type="file"
name="fotoMadre">
</div>
</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.jpg",

"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:
<form action="./upload" id="usuarioForm" enctype="multipart/form-
data" method="POST">
<input id="file_only" type="file" name="fichero"
<button type="reset" class="cancel">Cancelar
todos</button>
<button type="button" class="delete">Eliminar
todos</button>
</div>

</div>
</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, HttpServletRequest 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.MappingJacksonHttpMessa
geConverter).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.MappingJacksonHttpMessa
geConverter).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 Internet 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 permitir 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.HttpRequestHandlerServlet</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”)

UDA-Componentes RUP. Upload

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to UDA-Componentes RUP. Upload

Similar to UDA-Componentes RUP. Upload (18)

More from Ander Martinez

More from Ander Martinez (6)

Recently uploaded

Recently uploaded (11)

UDA-Componentes RUP. Upload