codequince: Upload de archivos con Codeigniter

En este tutorial, aprenderemos como hacer un upload ( subir ) de un archivo, usando CodeIgniter 2 Framework.

Sí todavía no saben como instalar el framework, aquí les dejo un tutorial.

Primero debemos configurar la variable
$config['base_url'] = 'http://localhost/ci_upload', está se encuentra en la ruta 'application/config/config.php'.

El proceso en general

Tenemos que tener en cuenta algunos pasos que vamos seguir para el proceso de upload.

Crear una vista de formulario que brinde la opción de seleccionar un archivo y enviarlo.
Crear una vista de éxito en caso el upload se haga correctamente.
Crear un controlador que contendrá :

Una función index para mostrar la vista del formulario, en caso de error se va refrescar esa misma vista, pero mostrando el error.
Una función do_upload para mostrar la vista de éxito de upload del archivo en caso se haya cumplido las configuraciones.

En el transcurso del proceso se dan una ciertas configuraciones, en cuanto al tamaño del archivo, ancho máximo, altura máxima, etc.Esto para determinar el éxito o error en el upload.

Empecemos

Creamos una vista form_upload.php en la carpeta 'application/views', este contendrá el formulario que va permitir seleccionar un archivo y enviarlo.

form_upload.php

<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="utf-8">
 <title>Upload Formulario</title>
</head>
<body>

 <h1>Upload File CodeIgniter 2</h1>

 <!-- Esto servirá para mostrar un mensaje de error -->
 <?php echo $error;?>

 <!-- Abriendo un formulario con el helper de CodeIgniter, es lo mismo que una 
 etiqueta form, necesariamente se debe agregar el enctype="multipart/form-data" -->
 <!-- <form action="http://localhost/ci_upload/index.php/upload/do_upload" 
    method="post" accept-charset="utf-8" enctype="multipart/form-data"> -->
 <?php echo form_open_multipart('upload/do_upload');?>

  <!-- etiqueta de entrada de archivo -->
  <input type="file" name="userfile" size="20" />

  <br /><br />

  <input type="submit" value="upload" />

 <?php  echo form_close(); ?>
 <!-- Se cierra el formulario, estamos usando el helper de CodeIgniter. -->
 <!--</form>-->
 <!-- -->

</body>
</html>

Creamos otra vista form_success.php en la carpeta 'application/views', este contendrá el mensaje de éxito cuando el archivo se logra subir correctamente, además de mostrar los atributos propios del upload del archivo.

form_success.php

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="utf-8">
  <title>Upload éxitoso</title> 
 </head>
<body>

 <h3> Tu archivo fue subido correctamente </h3>

 <ul>

  <!-- Recorremos la variable $upload que es un array que contiene 
  los valores relacionados al upload del archivo -->
  <?php foreach ($upload_data as $item => $value):?>
   <li><?php echo $item;?>: <?php echo $value;?></li>
  <?php endforeach; ?>
 
 </ul>

 <p>
  <!-- Esto es un helper , equivale a una etiqueta <a href></a>
   Te redirecciona a que vuelas a subir otro archivo.
   -->
  <?php echo anchor('upload', 'Upload de otro archivo'); ?>
 </p>

</body>
</html>

Creamos un controlador upload.php en la carpeta 'application/controllers', tendremos que cargar los helpers de form, url de CodeIgniter y utilizar la librería upload de CodeIgniter.

upload.php

<?php

class Upload extends CI_Controller {

 function __construct()
 {
  parent::__construct();
  /* cargamos los helper form y url */
  $this->load->helper(array('form', 'url'));
 }

 function index()
 {
  /* cargamos la vista form_upload y 
     un array de error vacío por si sucede un problema , en este caso como
  inicia el formulario todavía no hay errores es por eso que lo pasamos vacío.
  */
  $this->load->view('form_upload', array('error' => ' ' ));
 }

 function do_upload()
 {
  /* las configuraciones de la carpeta y los archivos que va aceptar subir
   -debemos crear la carpeta uploads en el root del proyecto.
   -tipos de archivos permitidos gif jpg png.
   -tamaño maximo 100kb
   -maximo ancho 1024
   -maximo alto 768
   */
  $config['upload_path'] = './uploads/';
  $config['allowed_types'] = 'gif|jpg|png';
  $config['max_size'] = '100';
  $config['max_width']  = '1024';
  $config['max_height']  = '768';

  /* cargamos la libreria de codeigniter upload
   esta nos ayudara  a gestionar de manera sencilla la subida
   del archivo.
  */
  $this->load->library('upload', $config);

  /*verifica si existe error */

  if ( ! $this->upload->do_upload())
  {
   /* error en la subida del archivo */

   /* obtenemos el error en un array */
   $error = array('error' => $this->upload->display_errors());

   /* cargamos la vista inicial pero ya con el array de errores lleno */
   $this->load->view('form_upload', $error);
  }
  else
  {
   /* éxito en la subida del archivo */

   
   $data = array('upload_data' => $this->upload->data());
                        /* obtenemos los datos del upload del archivo en un array, lo

                          pasamos a la vista form_success */
   $this->load->view('form_success', $data);
  }
 }
}
?>

Observación : debemos crear la carpeta uploads en el root de nuestro proyecto con todos los permisos de escritura y lectura.

Ahora a probar el tutorial, nos dirigimos a navegador y escribimos la url

http:localhost/ci_upload/index.php/upload

Veremos un formulario con un input de tipo file y un botón para enviar ese formulario.

Ahora seleccionamos una imagen que cumpla las configuraciones dadas, en mi caso yo voy a adjuntar está imagen.

Ahora que adjunto la imagen, voy a enviar el formulario para que pueda hacer el upload del archivo.

Como vemos fue exitoso, el upload del archivo y nos muestra sus datos propios.

Otra observación es que sí deseamos seguir subiendo le podemos dar click al enlace de abajo.

Sí revisamos la carpeta uploads debe estar la imagen que hemos subido.

El código lo pueden descargar dando click en CÓDIGO FUENTE.
Bueno eso es todo, espero que haya sido de su agrado el tutorial.
Cualquier duda que tengan, dejen sus comentarios y con gusto los ayudaré.

codequince

jueves, 15 de octubre de 2015

Upload de archivos con Codeigniter

2 comentarios: