You can read the English version of this post in http://phpsblog.agustinvillalba.com/swfupload-codeigniter/

En esta entrada vamos a explicar un poco qué es y cómo podemos utilizar la librería SWFUpload en nuestra aplicación hecha con el framework php CodeIgniter para que nuestros usuarios puedan subir sus archivos a la aplicación de una forma elegante y muy visual, y todo ello combinado con la seguridad y facilidad que nos ofrece CodeIgniter para la subida de archivos al servidor.

Qué es SWFUpload

SWFUpload es una librería que permite a los usuarios de nuestro sitio subir archivos al servidor, mediante la combinación de Flash y JavaScript. Aquí pueden ver unos ejemplos de uso de la librería.

Integrando SWFUpload en CodeIgniter

Lo primero que necesitamos para integrar la librería es, lógicamente, descargarla. Necesitaremos descargarnos el archivo de “core” y los “samples”. Una vez la tenemos descargada y descomprimida, crearemos una carpeta en el directorio raíz de nuestra aplicación CodeIgniter llamada swf/, y dentro de esta a su vez crearemos otra llamada swfupload/, de tal forma que la ruta a nuestra librería SWFUpload es /swf/swfupload/. En este último directorio colocaremos los archivos “swfupload.swf” y “swfupload_fp9.swf” (este último para los usuarios con Flash Player 9) que encontraremos en la carpeta del “core”. Bien con esto tenemos los swfs en su sitio.

Ahora necesitaremos los archivos JavaScript. Para ello creamos una carpeta llamada swfupload/ en el directorio “js” de nuestra aplicación. Allí colocaremos los archivos “handlers.js”, “fileprogress.js” y “swfupload.js” que nos hemos descargado con los samples de la librería, en la carpeta “demo/formsdemo”, dado que nuestro ejemplo se basa en la subida de un único archivo con el formulario, aunque la librería permite subir múltiples archivos y otras opciones muy variadas que pueden consultar en los ejemplos de uso.

Por último hemos de colocar la imagen “upload_flash_button_61x22.png” en nuestro directorio img en la raíz de nuestra aplicación.

Con esto ya tenemos todo lo necesario para poder subir archivos a nuestro sitio. Ahora pasamos a la vista del formulario.

El formulario

Una vez nos hemos descargado todo lo necesario y hemos colocado cada cosa en su sitio podemos pasar a crear nuestra vista del formulario para subir el archivo. En ella tendremos algunos campos de distintos tipos y el campo para subir el archivo en sí mismo. Es importante remarcar que, aunque subiremos un archivo, el SWFUpload no necesita ningún campo del formulario de tipo “file”. En su lugar, hemos de colocar un campo de texto en el cual SWFUpload colocará a posteriori el nombre del archivo. Pasamos a crear un archivo de vista en nuestro directorio “application/views”:

<?php echo form_open('procesa_form/procesa'); // Aquí pondremos la url del
controlador y función que procesará nuestro formulario?>
<div>
<?php
echo form_label('File:','file');
$data = array(  'id' => 'txtFileName',
'value' => '',
'size' => 50,
'disabled' => 'disabled',
'style' => 'border: solid 1px; background-color: #FFFFFF;');
echo form_input($data); //Insertamos el campo de texto que recibirá el nombre del archivo una vez subido
?>
<span id="spanButtonPlaceholder"></span>
(20 MB max)
</div>
<div id="fsUploadProgress"></div>
<input type="hidden" name="hidFileID" id="hidFileID" value="" />
<?php
echo "<br />";
$extra = 'id="btnSubmit"';
echo form_submit('upload','Send',$extra);
echo form_close();
?>
<!-- Añadimos los archivos de JavaScript de SWFUpload -->
<script type="text/javascript" src="<?php echo base_url();?>js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/swfupload/handlers.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/swfupload/fileprogress.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function () {
swfu = new SWFUpload({
// Backend settings
upload_url: "<?php echo base_url();?>procesa_form/upload",
file_post_name: "resume_file",
// Flash file settings
file_size_limit : "20 MB", //Limite de tamaño del archivo
file_types : "*.jpg",            // or you could use something like: "*.doc;*.wpd;*.pdf",
file_types_description : "Image Files",
file_upload_limit : 0,
file_queue_limit : 1,
// Event handler settings
swfupload_loaded_handler : swfUploadLoaded,file_dialog_start_handler: fileDialogStart,
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
//upload_start_handler : uploadStart,    // I could do some client/JavaScript validation here, but I don't need to.
swfupload_preload_handler : preLoad,
swfupload_load_failed_handler : loadFailed,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
// Button Settings
button_image_url : "<?php echo base_url();?>img/upload_flash_button_61x22.png",
button_placeholder_id : "spanButtonPlaceholder",
button_width: 61,
button_height: 22,
// Flash Settings
flash_url : "<?php echo base_url();?>swf/swfupload/swfupload.swf",
flash9_url : "<?php echo base_url();?>swf/swfupload/swfupload_fp9.swf",
custom_settings : {
progress_target : "fsUploadProgress",
upload_successful : false
},
// Debug settings
debug: false
});
};
</script>

Con esto ya tenemos el formulario de subida de archivos que verán los usuarios de nuestro sitio.

El controlador

Ahora pasaremos a implementar el controlador que gestionará el procesamiento del formulario y contendrá la función que realizará la subida del archivo. Para ello utilizaremos la librería de subida de archivos propia de CodeIgniter. Nuestro código sería algo así:

<?php
class procesa_form extends Controller {
public function procesa()
{
...
//Aquí recogemos el nombre del archivo
$file_name = $this->input->post('hidFileID');
//Una vez recogido el nombre del archivo
//podríamos insertarlo en una base de datos
//o hacer lo que necesitasemos
...
}

public function upload()
{
$config['upload_path'] = "directorio/donde/se/colocara/nuestro/archivo/";
 $config['allowed_types'] = 'jpg';
 $tam_megas = 20; //Tamanyo maximo del archivo en megas
 $config['max_size']    = $tam_megas * 1024; //

 $this->load->library('upload');
 $this->upload->initialize($config);
 if (!$this->upload->do_upload('resume_file'))
 {
 $this->data["params"]["error"] = array('error_upload' => $this->upload->display_errors());
 echo $this->upload->display_errors();
 }
 else
 {
 $uploaded_video = $this->upload->data();

 //Devolvemos el formulario el nombre final del archivo una vez subido
 echo $uploaded_video["file_name"];
 }
}
}

Con esto ya tendríamos creado nuestro controlador de procesamiento de datos del formulario y la función encargada de subir los archivos enviados por SWFUpload. Como resultado final, tenemos integrada la librería de subida de archivos con barra de progreso en nuestra aplicación CodeIgniter.

You can read the English version of this post in http://phpsblog.agustinvillalba.com/swfupload-codeigniter/

Anuncios
comentarios
  1. lilian dice:

    Hola no logro descargar el code y sample, me rebota hacia la página login de gmail, porfavor si alguien lo tiene descargado y utilizandolo podría enviarmelo a este mail lili.monte87@gmail.com, se lo agradecería muchísimo.
    sldos.

  2. cristian dice:

    hola amigo nose que problema tengo me podrias adjuntar los archivos…porfa

  3. masterniter dice:

    Hola gracias por la repuesta,

    Si ya lo añadí. Aparte tambien hay que usar el archivo javascript swf.queue.js. que es el que realiza las operaciones de cancelación. Aparece el botón pero no hace naa.
    El problema es que estoy intentando adaptar el cancelado al ejemplo “Classic Form Demo”, el cual no lo tiene, y parece que hay que trastocar bastante el archivo handlers.js, entre seguramente otras cosas que aun no he llegado.

    GRACIAS de nuevo 😉

  4. masterniter dice:

    HELP!

    Buenas,

    Necesito añadir un botón que cancele la importación del archivo, mas que nada es para los arhivos pesados, por si no tienes mucho tiempo para esperar a que los se suba.

    GRACIAS

    • En la demostración de SWFUpload (http://demo.swfupload.org/) tienes ejemplos de botón de cancelar.
      Básicamente has de añadir un parámetro más en “custom_setting”, tal que así:
      custom_settings : {
      progress_target : "fsUploadProgress",
      upload_successful : false,
      cancelButtonId : "btnCancel"
      },

      Espero que te sirva!
      Saludos

  5. Agust_pro dice:

    Buenas tocallo, necesito ayuda URGENTEMENTE

    me ocurre algo estraño : En el metodo procesa del controlador si no muestro por pantalla: echo $this->input->post(‘hidFileID’);, no me funcionan los echos que pueda tener en el metodo upload del controlador :S.

    ¿Alguien me puede echar una mano?????

    Muchas Gracias a todos!!

    • Hola Agustín!
      es muy raro lo que comentas, pero la pregunta es ¿por qué necesitas “echos” dentro de un controlador? Lo recomendable en el MVC es tener llamadas a vistas en los controladores, nunca echos.

      • Agust_pro dice:

        Cierto tienes razon. Simplemente puse algunos echos para hacer comprobaciones, sobre los valores de algunas variables.

        Si que es raro :S esto que me pasa. Quizas tenga algo que ver con la versión que tengo de code y sample, no se aun no lo conseguí solucionar….

  6. Alan dice:

    Amigo y no podrias poner el archivo para descargar?? y en q momento llamas a la vista? gracias

  7. Hola Agustín, ya lo he solucionado, era cosa de la configuración de CI.
    Hay que modificar el fichero system/application/config/mimes.php, cambiando la línea del pdf por ésta: ‘pdf’ => array(‘application/pdf’, ‘application/x-pdf’, ‘application/x-download’,’application/x-download’, ‘application/octet-stream’, ‘binary/octet-stream’, ‘application/unknown’, ‘application/force-download’),.
    En realidad creo que bastaría con añadir ‘application/octet-stream’, que es el tipo que detecta el controlador.

    Espero que le pueda servir de ayuda a alguien

  8. Muy buen tutorial, gracias a él tengo funcionando swfupload con CI.
    Pero, ¿alguien ha conseguido subir archivos pdf´s?
    Los archivos de imagen van sin problemas, pero los pdf´s no hay manera.

    • Yo no lo he necesitado, ¿pero has probado con la configuración del SWFUpload?, en concreto en el código de incrustación:


      window.onload = function () {
      swfu = new SWFUpload({
      // Backend settings
      upload_url: "...",
      file_post_name: "...",

      // Flash file settings
      file_size_limit : "X MB",
      file_types : "*.png,*.jpg,*.mp3,*.pdf", // o lo que necesites: *.doc, *.txt, etc,
      file_types_description : "PDF Files",
      file_upload_limit : 0,
      file_queue_limit : 1,

      // Event handler settings
      swfupload_loaded_handler : swfUploadLoaded,

      file_dialog_start_handler: fileDialogStart,
      file_queued_handler : fileQueued,
      file_queue_error_handler : fileQueueError,
      file_dialog_complete_handler : fileDialogComplete,

      //upload_start_handler : uploadStart, // I could do some client/JavaScript validation here, but I don't need to.
      swfupload_preload_handler : preLoad,
      swfupload_load_failed_handler : loadFailed,
      upload_progress_handler : uploadProgress,
      upload_error_handler : uploadError,
      upload_success_handler : uploadSuccess,
      upload_complete_handler : uploadComplete,

      // Button Settings
      button_image_url : "img/upload_flash_button_61x22.png",
      button_placeholder_id : "spanButtonPlaceholder",
      button_width: 61,
      button_height: 22,

      // Flash Settings
      flash_url : "swf/swfupload/swfupload.swf",
      flash9_url : "swf/swfupload/swfupload_fp9.swf",

      custom_settings : {
      progress_target : "fsUploadProgress",
      upload_successful : false
      },

      // Debug settings
      debug: false
      });

      Ya nos dices!

  9. InigoKintana dice:

    Cookie + Flash + Swfupload

    http://codeigniter.com/forums/viewthread/97399/P30/

    The simple way to get flash uploaders working is to set…

    $config[‘sess_match_useragent’] = FALSE;

    in your config file.

    The CI session manager is getting a different user-agent from the flash component (as mentioned above) and deleting the session.

    If you’re worried about doing this, faking a user-agent string is so easy that this method doesn’t offer much in the way of security anyway.

  10. Maderic_m dice:

    Hola, sabes como se hace para manejar el tema de la sesión? ya que según tengo entendido flash no envía la cookie con la cual se hace el manejo de sesión desde CI, saludos

  11. josepzin dice:

    Hace un tiempo tuve que usar el swfUploader, recuerdo que tuve algunas historias y no pude combinarlo con el de CodeIgniter… a ver si un dia de estos miro este articulo para comparar.

  12. Muchas gracias Agustín. De nuevo, nos deleitas con un artículo muy útil.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s