Utilizando el componente Plupload desde Php para subir múltiples archivos

Plupload, disponible en http://www.plupload.com, es un excelente componente que podemos utilizar para subir múltiples archivos desde una interfaz atractiva y con pocas líneas de código. En este artículo mostraremos como utilizar este componente desde Php y especialmente utilizando CodeIgniter.

La interfaz básica de este componente es como la que se muestra en la siguiente imagen:

En su interfaz tenemos dos botones, uno para agregar archivos y otro para comenzar la subida al servidor de los archivos que hemos cargado. Lo primero que tenemos que realizar para poner a funcionar este componente es adicionar correctamente al proyecto los estilos (css), las imágenes y los archivos javascript que utiliza el componente, y que se encuentran disponibles en http://www.plupload.com/download/ .

Después en el código javascript agregamos la siguiente función:

<script type="text/javascript">
// Initialize the widget when the DOM is ready
$(function() {
    $("#uploader").plupload({
        // General settings
        runtimes : 'html5,flash,silverlight,html4',
        url : " controller/multiple_upload", 
        // Maximum file size
        max_file_size : '10mb', 
        chunk_size: '1mb', 
        // Resize images on clientside if we can
        resize : {
            width : 200, 
            height : 200, 
            quality : 90,
            crop: true // crop to exact dimensions
        }, 
        // Specify what files to browse for
        filters : [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip,avi"}
        ],
 
        // Rename files by clicking on their titles
        rename: true,         
        // Sort files
        sortable: true, 
    });
});
</script>

Prestar atención al parámetro url que es donde especificaremos a que controller/function se va a invocar para realizar la subida de los ficheros. Existen otros parámetros interesantes como max_file_size para especificar el tamaño máximo de los archivos, filters que especifica qué tipo de archivos permitiremos subir desde el componente, o runtimes donde especificaremos con cuál plataforma queremos que funcione el componente, pudiéndose especificar más de una y se utilizarán la primera que aparezca de la lista definida.

En el código html colocamos el siguiente bloque de contenido, con el cual se visualizará nuestro componente:

<div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>

Si el componente no funciona se muestra el error especificado. Al dar clic en el botón “Start Upload” se llamará a la función que hemos especificado para subir cada uno de los archivos. Como en este caso estamos utilizando CodeIgniter podemos utilizar la librería upload para subir archivos que nos proporciona este framework, y la función multiple_upload será como sigue:

public function multiple_upload()
	{
            $dir_upload = './uploads/';
            $config['upload_path'] = $dir_upload;
            $config['allowed_types'] = 'jpg|gif|png|avi|zip';
            $config['max_size']	= '10240';
            $config['overwrite']  = true;

            $this->load->library('upload', $config);
            if(!file_exists($config['upload_path'])){
                mkdir ($config['upload_path'], 0775, true);		 
            }
            if ($this->upload->do_upload('file') )
            {
               //do
            }   
         }

Otro comportamiento que podemos desear para utilizar este componente es no hacer la subida de los archivos a través del botón que se establece para ello, sino por ejemplo cuando enviamos un formulario completo. En este caso no utilizaríamos el botón plupload_start, una de las formas de ocultarlo es modificando el estilo del botón:

<style type="text/css">
.plupload_button.plupload_start
{
        display:none;
}
</style>

Y como queremos subir los ficheros justo cuando se envía el formulario (en este caso current_form) tendríamos que especificarlo en el submit del mismo:

$(document).ready(function() {   
    $("#current_form").submit(function(e) {
        var uploader = $('#uploader').pluploadQueue();
        // Files in queue upload them first
        if (uploader.files.length > 0) {
            // When all files are uploaded submit form
            uploader.bind('StateChanged', function() {
                if (uploader.files.length === (uploader.total.uploaded + uploader.total.failed)) {
                    $('form')[0].submit();
                }
            });
            uploader.start();
            return false;
        } 
        //Other events   
        return true;
    })
 });

Con estos sencillos pasos tendremos una forma sencilla de subir múltiples ficheros utilizando el componente Plupload, ya sea cargándolos de una vez desde la forma básica o utilizando un formulario.

Es todo, espero haya sido de utilidad.