Subir imágenes en codeigniter

Subir imágenes en Codeigniter

Hugui Dugui

En esta entrada vamos a crear un formulario enctype para conocer el proceso de guardar un dato tipo texto, un botón para elegir una imagen y subir a una carpeta que elijamos. En base de datos vamos a guardar el dato y el nombre de la imagen.

Para iniciar vamos crear una base de datos llamada test y una tabla llamada "subir" como la siguiente:

CREATE TABLE `subir` (
  `id` int(11) NOT NULL,
  `dato` varchar(50) NOT NULL,
  `imagen` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

ALTER TABLE `subir`
  ADD PRIMARY KEY (`id`);

Creamos el método index en un controlador que nombraremos Inicio.php como se ve a continuación:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Inicio extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
    }
    
    public function index()
    {
        $data['titulo'] = 'Subir imagen';
        $this->load->view('headfoot/header', $data);
        $this->load->view('formulario');
        $this->load->view('headfoot/footer');
    }
}


Ahora, creamos un archivo llamado formulario.php en la carpeta views para pintar el formulario (usamos bootstrap para maquetar):

<div class="container-fluid">
   <div class="row">
      <div class="col-md-12 text-center">
         <h3>
            Subir imágenes con Codeigniter
         </h3>
      </div>
   </div>

   <div class="row">
      <div class="col-md-offset-3 col-md-6">
         <form method="POST" action="<?php echo base_url()?>inicio/subir" enctype="multipart/form-data">
            <div class="col-md-6">
               <div class="form-group">
                  <label>Dato</label>
                  <input class="form-control" type="text" id="txt_dato" name="txt_dato" value="" placeholder="Pon un dato de texto">
               </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                  <label>Imagen</label>
                  <input type="file" name="archivoImagen" /> 
               </div>
            </div>
            <div class="col-xs-12">
               <input type="submit" class="btn btn-success" value="Guardar">
            </div>
         </form>
      </div>
   </div>
</div>
        

Se ve así:


Para lo siguiente vamos a separar en dos partes el proceso para entenderlo mejor. Primero vamos a tomar el valor del input y el nombre de la imagen y los guardaremos en base de datos. Segundo hacer el proceso de la subida de la imagen a la carpeta.

Primero vamos a crear un método en el controlador llamado "subir" como se muestra (recuerda que el zip viene con explicaciones y comentarios extras en el código):

<?php
    public function subir()
    {
        $dato = $this->input->post("txt_dato");
        $nombre_imagen = $_FILES['archivoImagen']['name'];
        $data = array("dato" => $dato, "imagen" => $nombre_imagen);
        $guardar = $this->subir_model->guardar($data);
    }

El modelo lo nombramos Subir_model y lo guardamos en la carpeta models, es el siguiente:

<?php
class Subir_model extends CI_Model
{
    function guardar($data)
    {
        $this->db->insert("subir", $data);
        if ($this->db->affected_rows() > 0) {
            return true;
        } else {
            return false;
        }
    }
}

Segundo, para la subida de la imagen a un carpeta haremos otro método en el controlador  llamado subirImagen con lo siguiente:

<?php
    public function subirImagen()
    {
        $nombreCompleto = $_FILES['archivoImagen']['name'];
        $config['upload_path']          = './assets/images/';
        $config['allowed_types']        = 'gif|jpg|png|jpeg';
        $config['max_size']             = 2000;
        $config['max_width']            = 0;
        $config['max_height']           = 0;
        $config['file_name'] = $nombreCompleto;
        $this->load->library('upload', $config);

        if(!$this->upload->do_upload('archivoImagen')) {
            $data['titulo'] = 'Subir imagen | Error';
            $data['error'] = array('error' => $this->upload->display_errors());
	    $this->load->view('headfoot/header', $data);
	    $this->load->view('formulario_error');
	    $this->load->view('headfoot/footer');
        } else {
            $data['titulo'] = 'Subir imagen | Éxito';
            $data['infoImagen'] = $this->upload->data();
	    $this->load->view('headfoot/header', $data);
            $this->load->view('formulario_exito');
	    $this->load->view('headfoot/footer');
        }
    }


Creamos las vistas formulario_error. php y formulario_exito en la carpeta views para mostrar lo que haya sucedido en el proceso.

<div class="container-fluid">
   <div class="row">
      <div class="col-md-12">
         <h3 class="text-center">
            Imagen subida correctamente
         </h3>
         <pre>
         	<?php print_r($infoImagen);?>
         </pre>
      </div>
   </div>
</div>

<div class="container-fluid">
   <div class="row">
      <div class="col-md-12">
         <h3 class="text-center">
            No se ha podido subir la imagen
         </h3>
         <pre>
         	<?php print_r($error);?>
         </pre>
      </div>
   </div>
</div>


Finalmente, el controlador completo:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Inicio extends CI_Controller
{
    
    public function __construct()
    {
        parent::__construct();
        $this->load->model('subir_model');
    }
    
    public function index()
    {
        $data['titulo'] = 'Subir imagen';
        $this->load->view('headfoot/header', $data);
        $this->load->view('formulario');
        $this->load->view('headfoot/footer');
    }
    
    public function subir()
    {
        $dato          = $this->input->post("txt_dato");
        $nombre_imagen = $_FILES['archivoImagen']['name'];
        $data          = array(
            "dato" => $dato,
            "imagen" => $nombre_imagen
        );
        $guardar       = $this->subir_model->guardar($data);
        
        $this->subirImagen();
    }
    
    public function subirImagen()
    {
        $nombreCompleto          = $_FILES['archivoImagen']['name'];
        $config['upload_path']   = './assets/images/';
        $config['allowed_types'] = 'gif|jpg|png|jpeg';
        $config['max_size']      = 2000;
        $config['max_width']     = 0;
        $config['max_height']    = 0;
        $config['file_name']     = $nombreCompleto;
        $this->load->library('upload', $config);
        
        if (!$this->upload->do_upload('archivoImagen')) {
            $data['titulo'] = 'Subir imagen | Error';
            $data['error']  = array(
                'error' => $this->upload->display_errors()
            );
            $this->load->view('headfoot/header', $data);
            $this->load->view('formulario_error');
            $this->load->view('headfoot/footer');
        } else {
            $data['titulo']     = 'Subir imagen | Éxito';
            $data['infoImagen'] = $this->upload->data();
            $this->load->view('headfoot/header', $data);
            $this->load->view('formulario_exito');
            $this->load->view('headfoot/footer');
        }
    }
}


En este gif vemos el proceso en acción:


Puedes bajar el proyecto codeigniter en este link, recuerda que este código viene comentado con explicaciones extras que no se pusieron aquí para no perder focus en el código

Hasta aquí esta entrada, cualquier duda o comentario, házmelo saber en ringhugos@gmail.com, también puedes escribirme al whatsapp. Muchas gracias por leer el blog :D