Cómo subir imágenes en Laravel 5

Subir imágenes es una de las tareas más fundamentales con las que cuentan las aplicaciones web. En esta ocasión vamos a aprender a subir imágenes en Laravel 5 con ayuda de Intervention Image.

Intervention Image es una librería OpenSource de PHP para la manipulación de imágenes. Proporciona una forma más fácil y expresiva de crear, editar y componer imágenes.

1.- Instalación

Para instalar Intervention Image en nuestro proyecto Laravel, ejecutamos una consola para dirigirnos al directorio donde tengamos instalado el proyecto e introducimos el siguiente comando de Composer:

composer require intervention/image

2.- Declaración

Una vez instalado el paquete, tenemos que declarar las clases dentro de nuestro archivo config/app.php:

/*
/ Aplication Services Providers
*/
Intervention\Image\ImageServiceProvider::class,

/*
/ Aliases
*/
'Image' => Intervention\Image\Facades\Image::class,

2.2- Crear un subdirectorio para las imágenes

Al igual que contamos con los directorios de css o js dentro de /public, se va a crear otra nueva para el almacenamiento de las imágenes que vayamos a subir. Podríamos llamarla /img y será aquí donde le indiquemos al controlador que las tiene que guardar.

3.- Guardar imagen desde el controlador

Una vez tenemos nuestra vista del formulario, que se va a encargar de recoger la información (no olvidar el enctype=»multipart/form-data»), procedemos a crear la función encargada del almacenamiento en el controlador.

<?php

use Image;

public function store(Request $request) {
   // ruta de las imagenes guardadas
   $ruta = public_path().'/img/'; 

   // recogida del form
   $imagenOriginal = $request->file('avatar');

   // crear instancia de imagen
   $imagen = Image::make($imagenOriginal);

   // generar un nombre aleatorio para la imagen
   $temp_name = $this->random_string() . '.' . $imagenOriginal->getClientOriginalExtension();

   // redimensionar el tamaño de la imagen
   $imagen->resize(300,300);

   // guardar imagen
   //save( [ruta], [calidad])
   $imagen->save($ruta . $temp_name, 100); 

   $personaje = new Personaje;
   $personaje->filename = $temp_name;
   $personaje->save();

   return redirect('personajes/create');
}

Expliquemos un poco el código. Al principio, instanciamos el uso de la clase Image que habíamos declarado anteriormente.

Lo siguiente que podemos instanciar, será la ruta donde vamos a guardar las imágenes subidas. Laravel cuenta con una serie de funciones manejadoras que nos ayudan con funcionalidades comunes en PHP. Por ejemplo, public_path es un método que nos devuelve la ruta donde se encuentra nuestro directorio «public» dentro de la aplicación.

Como estamos usando el objeto request para recoger los datos del formulario, guardamos en una variable el archivo de imagen.

Y ahora vendría la parte más importante para empezar a usar Intervention. Y esa es crear una instancia de la imagen. Esta clase cuenta con método make encargado de declarar el objeto al cual se le pasa como atributo la imagen recogida del formulario.

3.1- Generar un nombre aleatorio para la imagen

Haciendo una pequeña pausa en el procedimiento, vamos a aprender a generar un nombre aleatorio que nos garantice que no se van a repetir nombres ni rutas.

Se puede agregar en cualquier parte del controlador porque la vamos a declarar como protected (si tienes duda de cómo funcionan los niveles de visibilidad). Básicamente, la siguiente función se encarga de devolver una cadena string, de tamaño 10, con caracteres alfanuméricos aleatorios.

protected function random_string() {
   $key = '';
   $keys = array_merge( range('a','z'), range(0,9) );

   for($i=0; $i<10; $i++) {
      $key .= $keys[array_rand($keys)];
   }

   return $key;
}

Con este objeto generado, ahora podemos guardar la imagen en la ruta con la sencilla función de save, la cual, recibe como parámetros: la ruta y la calidad (de forma opcional, por defecto está configurada a 90).

No debemos olvidarnos de guardar los datos en la base de datos, entre ellos el nombre del archivo generado aleatoriamente para posteriormente poder acceder a la imagen desde una consulta Eloquent.

4.- Mostrar la imagen en la vista

Gracias a que anteriormente hemos declarado un directorio llamado img, dentro de la carpeta public, el acceso a las imágenes es tan simple como introducir esta ruta dentro de la propiedad src de nuestra etiqueta imagen:

<!-- Nos hemos traido el objeto con Eloquent -->
<img src="img/{{ $p->filename }}" alt="avatar">

Más adelante aprenderemos a editar en caliente las imágenes que hemos subido por el formulario, de modo que guardemos imágenes ya editadas a nuestro gusto, pero por ahora, hemos aprendido a cómo subir imágenes en Laravel 5.