Archivo de marzo de 2011

Uploadify: Subida de archivos con jQuery

jueves 31 de marzo de 2011

La última página web que hemos creado en Uhuru Labs, Navarro y Soler CAD-PLM Software, requería una sección donde los usuarios de la web pudieran mandar a nuestro cliente ficheros de un tamaño considerable. Teniendo este requerimiento empezamos a investigar por la red buscando algún uploader que no fuese el simple formulario de subida de ficheros, sino que proporcionara algo más, aparte de ser fácilmente configurable.

Enamorados como estamos de jQuery y de todo lo que lleva consigo esta potente librería en javascript, buscamos algún uploader que estuviera hecho a partir de jQuery y encontramos Uploadify. Un pequeño vistazo por encima nos hizo darnos cuenta de las grandes posibilidades que tenía este pequeño trozo de código.

Al estar utilizando WordPress como backend primero miramos si había algún plugin hecho ya que nos facilitara las cosas. Encontramos uno, pero no conseguimos hacerlo funcionar, así que lo pusimos a pelo en la plantilla que estábamos creando. Nos basamos en la última versión que tiene uploadify ahora mismo estable, la 2.1.4, ya que la beta 3.0 carecía de documentación y no queríamos embarrarnos las manos con cosas no probadas.

Una vez bajado el archivo comprimido con todos los archivos necesarios, descomprimimos en la carpeta de nuestro tema. Con lo que quedaría todo dentro de una carpeta, en nuestro caso la llamamos uploadify.

Entonces hicimos la carga de los archivos .js necesarios y de la hoja de estilos .css. Nosotros siempre cargamos las hojas de estilo en la etiqueta <head>:

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.css" />

y la carga de los archivos javascript lo hacemos en el footer.php, justo antes del cierre del tag <body>:

<!-- Uploadify -->
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/uploadify/swfobject.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'template_url' ); ?>/uploadify/jquery.uploadify.v2.1.4.js"></script>

Utilizamos el código php bloginfo(‘template_url’) para poner la dirección absoluta donde se encuentran los archivos.

Queríamos que cada cliente tuviera su propio directorio para subir archivos con lo que necesitábamos el nombre de usuario una vez logueado el cliente. Así que en la página donde queríamos el uploader pusimos este trozo de código:

<script type="text/javascript">
var files = new Array();
var user = '<?php echo $username; ?>';
var $cont = 0;
           jQuery(document).ready(function() {
             jQuery('#file_upload').uploadify({
               'uploader'  : '<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.swf',
               'script'    : '<?php bloginfo( 'template_url' ); ?>/uploadify/uploadify.php',
               'cancelImg' : '<?php bloginfo( 'template_url' ); ?>/uploadify/cancel.png',
               'folder'    : '<?php echo URI_UPLOADS.'/'.$username.'/'; ?>',
               'auto'      : false,
               'removeCompleted' : false,
               'simUploadLimit' : 3,
               'buttonText' : '<?php _e('SELECCIONAR','nysplm'); ?>',
               'multi' : true,
               'onError' : function (event,ID,fileObj,errorObj) {
                 alert(errorObj.type + ' Error: ' + errorObj.info);
               },
               'onComplete' : function (event, ID, fileObj, response, data) {
                        var json = {"name": fileObj['name'], "size": fileObj['size'], "type": fileObj['type']};
                        files[$cont] = json;
                        $cont++;
                },
               'onAllComplete' : function (event, data) {
                        //alert("Response: "+response);
                        send_confirmation(data);
                        $cont = 0;
                        files = [];
                 }
              });
           });

Donde le decimos a uploadify:

  • uploader: donde está el archivo .swf que contiene el código flash que nos permitirá subir los archivos
  • script: donde está el archivo .php que necesita uploadify para hacer la carga de los archivos
  • cancelImg: donde se encuentra la imagen que se muestra para cancelar la subida de los archivos
  • folder: el directorio donde queremos subir los archivos. En nuestro caso esto es dinámico, así el cliente subirá los archivos a su propio directorio.
  • auto: indica que la subida no será automática, sino que el usuario deberá, una vez cargados los archivos, presionar un enlace para comenzar la carga.
  • removeCompleted: indicamos que no quite de pantalla los archivos subidos.
  • simUploadLimit: establecemos a 3 ficheros el límite de subida simultánea.
  • buttonText: ya que este gran software está en inglés, utilizamos esta opción para cambiar el texto del botón de carga de archivos.
  • multi: indicamos que se pueden subir varios archivos simultáneamente.
  • onError: función que mostrará una alerta js si se produce algún error.
  • onComplete: función que se ejecutará cada vez que se suba correctamente uno de los ficheros
  • onAllComplete: función que se ejecutará cuando se hayan subido todos los ficheros.

Alguien se habrá dado cuenta del comentario que hay en el onAllComplete:

 alert("Response: "+response);

Esto sirve de mucha ayuda cuando estamos desarrollando. Puede ser que el archivo no se suba correctamente por falta de permisos. Esto para uploadify no es un error, ya que no es competencia suya, con lo que el error es devuelto a la función onAllComplete en lugar de lanzar un error la función onError. Por ello, si vemos que no se muestra ningún error pero el archivo no se sube al servidor correctamente, descomentar esta línea puede aclarar que está pasando.

Y por último, y no menos importante, habrá que poner el tag donde se cargará uploadify:

<input id="file_upload" name="file_upload" type="file" />
<a href="javascript:$('#file_upload').uploadifyUpload();"><?php _e('Subir archivos','nysplm'); ?></a>

donde ponemos el input con el identificador que cargará uploadify y un enlace para subir los archivos simultáneamente.

Y hasta aquí, esperamos haber sido de ayuda. Si alguien tiene alguna duda pues a comentar. Ayudaremos en lo que podamos.