UDA-Componentes RUP. Upload

67 %
33 %
Information about UDA-Componentes RUP. Upload
Technology

Published on March 28, 2014

Author: andermartinez

Source: slideshare.net

Description

UDA-Utilidades de desarrollo de aplicaciones
• UDA-Componentes RUP. Upload

http://code.google.com/p/uda/

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: 22/11/2013 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/23 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. Cambios producidos desde la última versión Se distribuye la versión minimizada de los ficheros javascript y de estilos de RUP. Control de difusión Responsable: Ander Martínez Aprobado por: Firma: Fecha: Distribución: Referencias de archivo Autor:

Componentes RUP – Upload iii/23 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/23

Componentes RUP – Upload 5/23 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.

Componentes RUP – Upload 6/23 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

Componentes RUP – Upload 7/23 • 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>

Componentes RUP – Upload 8/23 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 sido enviados --> <button type="reset" class="cancel">Cancelar todos</button>

Componentes RUP – Upload 9/23 <!—- Eliminar todos los ficheros que han sido enviados --> <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" class="fileupload-progressbar"></div> </div> A su vez, la lista de ficheros contiene los siguientes elementos.

Componentes RUP – Upload 10/23 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" />

Componentes RUP – Upload 11/23 </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 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"> <form action="../upload" id="usuarioForm" enctype="multipart/form-data" method="POST"> <div class="formulario_linea_izda_float">

Componentes RUP – Upload 12/23 <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"> <!-- Primer componente upload --> <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> <!-- Segundo componente upload --> <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({

Componentes RUP – Upload 13/23 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.

Componentes RUP – Upload 14/23 • 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.

Componentes RUP – Upload 15/23 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");

Componentes RUP – Upload 16/23 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) {/* ... */});

Componentes RUP – Upload 17/23 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).

Componentes RUP – Upload 18/23 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"> <!-- Tamano maximo del archivo --> <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",

Componentes RUP – Upload 19/23 "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>

Componentes RUP – Upload 20/23 <div class="fileupload-content"> <table class="files"></table> <div id="fileupload-progressbar" class="fileupload-progressbar"></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) {

Componentes RUP – Upload 21/23 uploadService.deleteFromDisk(URL_UPLOAD_BASE_DIR, fileName); }

Componentes RUP – Upload 22/23 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.

Componentes RUP – Upload 23/23 • 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

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Diálogo vs Narrativa - Documents - Discover, share ...

Upload Login / Signup. Leadership; Technology; Education; Marketing; Design; More Topics. Search; ... UDA-Componentes RUP. Diálogo (v2.1.0 deprecado)
Read more

Diálogo Universitario - Documents

Upload Login / Signup. Leadership; Technology; Education; Marketing; Design; More Topics. Search; ... UDA-Componentes RUP. Diálogo (v2.1.0 deprecado)
Read more