Uploadify: Subida de archivos con jQuery

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.

Tags: , ,

Compartir en Facebook Compartir en Twitter

16 Comentarios a “Uploadify: Subida de archivos con jQuery”

  1. Uploadify | Carlos Faria dice:

    […] Utilización de Uploadify por los chicos de Uhuru Labs Esta entrada fue publicada en Web y etiquetada ftp, jquery, uploader, uploadify. Guarda el enlace permanente. ← SetLocale en PHP […]

  2. Jose Luis dice:

    Me gusta mucho chicos… seguramente lo pruebe en la web que estoy haciendo 😛

    Muchas gracias a todos (sobretodo a Alfredo, por tanto que me enseñaste 🙂 )

  3. Juan Pablo dice:

    Hola!! me interesaria saber como puedo agregar mas variables en el codigo jquery “jquery.uploadify” y poder recibirlas en upload.php. por ejemplo la variable pepe:

    —–
    ‘uploader’ : ‘/uploadify/uploadify.swf’,
    ‘script’ : ‘/uploadify/uploadify.php’,
    ‘cancelImg’ : ‘/uploadify/cancel.png’,
    ‘folder’ : ”,
    auto’ : false,
    ‘pepe’ :1,
    ‘removeCompleted’ : false,
    …….

    … esa variable pepe quiero recibirla en upload.php.
    Gracias!!

  4. Carlos dice:

    Hola Juan Pablo,

    si lo quieres hacer exactamente como dices habría que modificar el código de Uploadify. Además supongo que habría que hacer una llamada via Ajax pasándole el valor de la nueva opción.

    De todas formas que sepas que eso que tu llamas variables no lo son, son opciones de configuración que se le pasan al script.

    Lo que podrías hacer es pasar la variable en la función onAllComplete. Algo así:


    'onAllComplete' : function (event, data) {
    var $pepe = 1;
    complete_task($pepe);
    }

    Luego deberás tener una función en javascript que se llame complete_task que se encargue de llamar via ajax a la función dentro del fichero .php

    Un saludo

  5. Pedro Oronoz dice:

    Amigo una pregunta.. como podria hacer para cambiarle el nombre al archivo que estoy vuelto loco y no logro hacerlo y seguramente es una tonteria

  6. Carlos dice:

    En el archivo uploadify.php cambia la variable $targetFile por el nombre que quieras darle al archivo.

    Si no quieres que sea siempre el mismo nombre puedes hacer una cadena de texto con un timestamp por ejemplo.

  7. Javier Garrido dice:

    Tengo un problema con el uploadify. No me sube todos los ficheros que le pongo. Lo estoy gastando para subir fotos a una web, y no me las sube todas, en cambio si que me dice que se han subido, o por lo menos no me da ningún error diciéndome lo contrario. Una vez subidas en la base de datos si que aparecen todas las direcciones, pero en la carpeta no están todas las fotografías. Sabéis si tiene solución?

    Gracias.
    Un saludo.

  8. Felix dice:

    Estimado, buenas tardes. Estoy utilizando el uploadify, lo manejo bastante bien, pero me he topado con el siguiente requerimiento que no se como poder implementarlo, a ver si me pueden dar una mano por favor.

    Necesito que cuando se cargue la pagina por primera se muestre el archivo y la barra de progreso definida previamente por mi.

    Necesito que el usuario vea el archivo tentativo a subir y lo único que puede hacer es darle aceptar o cancelarlo y cargar otro archivo.

    Desde ya por la ayuda que me puedan brindar. Si no es posible por favor orientenme donde puedo recurrir gracias.!

  9. Diego Nieto dice:

    Un saludo.

    Tengo un problema con el uploadify, cuando intento subir los archivos da un error de javascript:

    TypeError: $(“#file_upload”).uploadifyUpload is not a function

    inclui las librerias en el header tanto el css como el js.

    Gracias por su pronta respuesta

  10. Carlos dice:

    Tiene pinta de que estas cargando dos veces la librería jQuery y está creando un conflicto. ¿Puede ser?
    Dinos una URL y si tenemos tiempo te lo miramos 😀

  11. Carlos dice:

    O puede ser que no la estés cargando directamente? :S

  12. otoniel dice:

    tengo un problema con la ruta donde se almacenan los archivos, la cuestión está en que cuando en el archivo uploadify.php le doy la ruta de almacenaje , algo así: $targetFolder = “/carpeta/profiles/Yo/”; lo hace correctamente, pero si intento algo como esto: $targetFolder = “/carpeta/profiles/$nombre/”; guarda los archivos en profiles y no dentro de la carpeta que le indiqué , ya comprobé todo lo que se me pudo ocurrir, sí recibo bien la variable $nombre, imprimí los valores para rastrear en donde pierdo mi variable , pero no es así , no es por falta de permisos, ya que le di todos a estas carpetas, y ya no se me ocurre que más puedo hacer. Espero y me puedan ayudar con este asunto… gracias !!!

  13. Carlos dice:

    Hola Otoniel,

    ¿Has probado a poner algo así?

    $targetFolder = '/carpeta/profiles/'. $nombre .'/';

  14. rodolfolp dice:

    Buenos dias: Necesito ver si es posible que en el script se pueda poner el tamaño minino de una imagen, no el maximo, sino el minimo, asi como si en algun momento se prodria añadir algun codigo extra hecho por uno mismo.Gracias

  15. Carlos dice:

    Hola Rodolfo, pues la verdad es que esa parte debería hacerse desde el script de uploadify. Habría que modificar el script para controlar el tamaño de los archivos.

    La gente de Uploadify ha avanzado mucho desde la publicación de esta entrada. De hecho ya van por la versión 3.2.1. Igual han implementado ya esa funcionalidad.

    Échale un vistazo a http://www.uploadify.com/documentation/

    Si no estuviera habría que coger la versión de desarrollo de Uploadify y añadirle dicha funcionalidad.

  16. Mohamed dice:

    I’m really enjoying the design and layout of your site.
    It’s a very easy on the eyes which makes it
    much more pleasant for me to come here and visit more often. Did you hire out a designer to create your theme?

    Superb work!

Dejar un comentario

XHTML: Puedes usar estos tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>