Cómo mostrar imágenes cargadas en Codeigniter 4: DOS FORMAS!

14-07-2021 - Andrés Cruz

In english
Cómo mostrar imágenes cargadas en Codeigniter 4: DOS FORMAS!

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

La carga de imágenes y manejo de archivos cargados es fundamental en cualquier aplicación, ya que generalmente cuando cargamos los archivos vamos a querer hacer algo con ellos, que en la mayoría de los casos es mostrarlos! en CodeIgniter 4 puede que no sea tan directo; en Laravel tenemos una manera estándar mediante los discos, pero en CodeIgniter 4 al ser un framework más pequeño y simple NO la tenemos, por lo tanto, voy a mostrarte cómo un mecanismo sencillo para lograr este objetivo

Entendiendo como funciona la carga de archivos en CodeIgniter 4

Ya en una entrada pasada, vimos cómo cargar archivos en CodeIgniter 4, siguiendo la documentación oficial, tenemos una carpeta llamada writeable en la cual podemos escribir o es "escribible"; el problema viene cuando NO podemos mostrar los archivos contenidos en ella, porque NO son accesibles mediante http, por lo tanto tenemos dos posibles soluciones:

1 Acceder mediante código en el servidor

También podemos acceder a ese carpeta mediante código PHP, es decir, mediante CodeIgniter 4 y luego la mostramos mediante la función de fpassthru de php y colocando los header correspondientes:

function image($movieId = null, $image = null)
{
 // abre el archivo en modo binario
 if (!$movieId) { // $movieId== null
  $movieId = $this->request->getGet('movie_id');
 }
 if (!$image) { // $image== null
  $image = $this->request->getGet('image');
 }
 if ($movieId == '' || $image == '') {
  throw PageNotFoundException::forPageNotFound();
 }
 $name = WRITEPATH . 'uploads/movies/' . $movieId . '/' . $image;
 if (!file_exists($name)) {
  throw PageNotFoundException::forPageNotFound();
 }
 $fp = fopen($name, 'rb');
 // envía las cabeceras correctas
 header("Content-Type: image/png");
 header("Content-Length: " . filesize($name));
 // vuelca la imagen y detiene el script
 fpassthru($fp);
 exit;
}

Esta es la opción que seguimos en mi curso COMPLETO de CodeIgniter 4 que puedes ver en esta plataforma.

Mover o hacer las carga de archivos en la carpeta public

El otro mecanismo que seria el mas recomendado en la mayoria de los casos, seria en vez de mover los archivos cargados a la carpeta writeable, lo cargamos en la carpeta public, que es la única que tenemos para hacer este tipo de operaciones:


 $newName = $imageFile->getRandomName();
    //$imageFile->move(WRITEPATH . 'uploads/avatar/', $newName);
    $imageFile->move(ROOTPATH.'public/uploads', $newName);
    $personModel = new PersonModel();
    $personModel->update($id, [
     'image' => $newName
    ]);

Recuerda que con esto estamos rompiendo un poco el esquema del framework ya que esta carpeta NO está destinada para tal fin; puede ser un poco riesgoso y que en esta carpeta se encuentra el archivo de salida de nuestro proyecto, el index.php del framework y por ende podemos ejecutar TODO lo que carguemos allí; por lo tanto, nuestro usuario puede subir un archivo ejecutable y ejecutar el mismo en nuestro servidor, aunque por supuesto esto sería un ataque, cosa que no sucedería en la carpeta writeable ya que solamente la podemos usar para cargar archivos; aunque de esta manera tenemos un mecanismo más limpio para hacer este tipo de operaciones.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 2 días!

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
!Web Alojada en Hostinger!