How to display uploaded images in Codeigniter 4: TWO WAYS!

Upload images and handling uploaded files is essential in any application, since generally when we upload files we want to do something with them, which in most cases is to display them! in CodeIgniter 4 it may not be as straightforward; in Laravel we have a standard way through disks, but in CodeIgniter 4, being a smaller and simpler framework, we do NOT have it, therefore, I am going to show you how a simple mechanism to achieve this goal

Understanding how file upload works in CodeIgniter 4

Already in a past entry, we saw how to load files in CodeIgniter 4, following the official documentation, we have a folder called writeable in which we can write or it is "writable"; the problem comes when we can NOT show the files contained in it, because they are NOT accessible through http, therefore we have two possible solutions:

1 Acceder mediante código en el servidor

We can also access that folder through PHP code, that is, through CodeIgniter 4 and then we show it through the php fpassthru function and placing the corresponding headers:

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;
}

This is the option we follow in my COMPLETE CodeIgniter 4 course and book that you can see on this platform.

Move or upload files to the public folder

The other mechanism that would be the most recommended in most cases, would be instead of moving the uploaded files to the writeable folder, we upload them to the public folder, which is the only one we have to do this type of operation:

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

Remember that with this we are breaking the framework scheme a bit since this folder is NOT intended for that purpose; It can be a bit risky and that in this folder is the output file of our project, the index.php of the framework and therefore we can execute EVERYTHING that we load there; therefore, our user can upload an executable file and run it on our server, although of course this would be an attack, which would not happen in the writeable folder since we can only use it to upload files; although in this way we have a cleaner mechanism to do this type of operation.

27-04-2023 - Andrés Cruz

En español

• Category
• /
• CodeIgniter
• /
• How to display uploaded images in Codeigniter 4: TWO WAYS!