SWFUpload en CodeIgniter

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/