sábado, 7 de enero de 2012

How to: Upload Files with Ajax in CodeIgniter // Subir Archivos usando ajax en CodeIgniter

Hola a todos. antes que nada espero que esten pasando un feliz nuevo año y que la mayoria de las metas propuestas puedan ser completadas :D
Bueno, empezando con el tema de la entrada, ahora veremos como subir archivos con el framework php CodeIgniter. para eso vamos a usar la libraria upload que nos proporciona el framework, seria bueno darle una leida al articulo del manual oficial :D.

Pero usando solamente la libreria del framework (que realiza su funcion de una manera excelente) no se logra obtener un funcionamiento asincrono,para ello vamos a usar este grandioso script de javascript el cual podemos descargar desde la web de los desarrolladores aca, en la pagina explican como hacer funcionar el escript, asi que lo que vamos a hacer aca es simplemente integrarlo son CodeIgniter y usar la libreria upload para eso. entonces iniciamos.



Para esto vamos a crear los siguientes archivos, en mi caso:
  • View/files--> uploadFile.php
  • Controllers--> FileController.php

y por ultimo necesitaremos la libreria de javascript JQuery y la jquery-ui.min, las cuales podemos descargar desde la pagina oficial de jquery.

una vez tengamos todos los archivos necesarios procedemos a crear la vista:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Upload Files by McCubo...gnuteam.blogspot.com</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="<?= base_url("js/jquery.js"); ?>"></script>
        <script type="text/javascript" src="<?= base_url("js/jquery-ui.min.js"); ?>"></script>
        <script type="text/javascript" src="<?= base_url("js/ajaxfileupload.js"); ?>"></script>
        <link rel="stylesheet" href="<?= base_url("css/main.css"); ?>" />
        <link rel="stylesheet" href="<?= base_url("css/smoothness/jquery-ui-1.8.16.custom.css"); ?>" />
        <script type="text/javascript" >
            $(function() {
                $('#uploadFile').submit(function(e) {
                    e.preventDefault();
                    var doUploadFileMethodURL = "<?= site_url('fileController/doUploadFile'); ?>";
                    $.ajaxFileUpload({
                        url : doUploadFileMethodURL,
                        secureuri : false,
                        fileElementId :'userFile',
                        dataType : 'json',
                        data : { 'title' : $('#title').val() },
                        success  : function (data) {
                            var base_url = "<?= base_url("css"); ?>";
                            $(".userDialog")
                            .html(data.message)
                            .css("background", 'url('+base_url+"/"+data.background+') no-repeat right')
                            .dialog({
                                autoOpen: true,
                                show: "explode",
                                hide: "hide",
                                modal: true
                            });
                            if(data.status != 'error') {
                                $('#title').val('');
                            }
                        }
                    });
                    //                    return false;
                });
            });
        </script>
        <style type="text/css" >
            .userDialog{
                display: none;
            }
        </style>
    </head>
    <body>
            <fieldset style="width: 360px;"><legend>upload File</legend>
                <form action="" method="post" id="uploadFile" >
                    <label class="form">Title</label><input type="text" name="title" id="title" maxlength="40"/>
                    
                <label class="form">File</label><input type="file" id="userFile" name="userFile" size="20" />
                <input type="submit" id="submit" name="submit" value="Upload File!"/>
            </form>
        </fieldset>
        <div class="userDialog"></div>
    </body>
</html>

Bueno, lo que hay que tomar en cuenta es que en lugar de usar el .ajax que provee Jquery usaremos el .ajaxFileUpload del script que nos hemos descargado. Y En ese método indicamos (mediante el atributo url) la direccion del metodo que se va ejecutar (en nuestro caso el metodo del controlador), el tipo de dato, y los parametros que recibira ese metodo y lo mas importante el atributo fileElementId, donde indicamos el id que posee el componente de tipo 'file' en nuestro formulario.


Bueno, ahora procedemos a crear nuestro Controlador y el metodo que se llamara como lo hemos indicado en el javascript(doUploadFile)
Creamos el modelo:

<?php

class FileController extends CI_Controller {

    private $max_size = 1024;

    public function __construct() {
        parent::__construct();
        $this->load->library(array('upload', 'form_validation'));
        $this->load->helper(array('form', 'string'));
    }

    public function index() {
        $this->load->view('files/uploadFile');
    }

public function doUploadFile() {
        $status = '';
        $message = '';
        $background = '';
        $file_element_name = 'userFile';
        $this->form_validation->set_rules('title', 'Description', 'required|min_length[5]');
        if (!$this->form_validation->run()) {   // Validation Error
            $this->form_validation->set_error_delimiters('', '');
            $form_error_title = form_error('title');    //  catch file description field error
            $message = $form_error_title . "<br >";
            $status = 'error';
            $background = 'images/error.png';
        } else {
            if ($status != 'error') {
                $config['upload_path'] = './uploads/';
                $config['allowed_types'] = 'png|jpg|gif|doc|docx|pdf|txt|xsl|xslx|html|odf|rar|zip|7zip';
                $config['max_size'] = $this->max_size * 8;
                $config['overwrite'] = TRUE;
                $this->upload->initialize($config);
                if (!$this->upload->do_upload($file_element_name)) {    // Validation Errors. FAIL
                    $status = 'error';
                    $message = $this->upload->display_errors('', '');
                    $background = 'images/error.png';
                } else {
                    $data = $this->upload->data();
                    $title = $this->input->post('title');
      // casi siempre queremos guardar ese archivo en la base de datos. para eso llamamos el metodo del modelo indicado
                    // $insertFile = $this->SOME_MODEL->SAVE_FILE($data, $title);  // Llamada al modelo para guardar
      $insertFile = TRUE;
                    if ($insertFile) {  // File was added correctly to DB
                        $status = 'succees';
                        $message = 'File SuccessFully Uploaded!';
                        $background = 'images/saved.png';
                    } else {    // Record wasnt added to DB
                        unlink($data['full_path']); # Deletes the File
                        $status = 'error';
                        $message = 'Something went wrong!!...';
                        $background = 'images/error.png';
                    }
                }
                @unlink($_FILES[$file_element_name]);
            }
        }
        $json_encode = json_encode(array('message' => $message, 'status' => $status, 'background' => $background));
        echo $json_encode;
    }
?>
Con eso seremos capaz de subir archivos al servido, y si queremos guardar informacion del mismo en una tabla de la base de datos.
Espero me halla dado a entender, y que este pequeño ejemplo de como subir archivos sea util y funcional para alguien. Comenten si tienen problemas o dudas y vamos a tratar de encontrarles solucion :D.
Suscribanse al Feed o haganse seguidores del blog para estar al pendiente de nuevos post.
Hasta un nuevo post. Saludos!!!!

2 comentarios:

  1. ¡¡¡Cubo!!!.. nos has dejado abandonados en el blog de la comunidad, aunque sea copia y pega los que pones acá ;)

    ResponderEliminar
  2. coloca un link con la carpeta del proyecto por favor no puedo hacerlo :(

    ResponderEliminar