3

In Codeigniter 4, how to display uploaded images. Is there any permission needed to be given?

I uploaded images in writable/uploads/avatar in CI4 project when I check on the inspect element and copy the link and paste on the browser the images show.

    <pre>
        <img src="<?=WRITEPATH.$list->avatars?>" class="img-radius" alt="User- 
     Profile-Image">
        <img src="<?=base_url()?>/writable/<?=$list->avatars?>" class="img- 
    radius" alt="User-Profile-Image">
    </pre>

please explain how to display images

Genes
  • 300
  • 1
  • 3
  • 16
Durai Raj
  • 47
  • 1
  • 1
  • 8

6 Answers6

5

You could move the uploaded file to a public upload folder:

$fileName = $file->getRandomName();
$ext = $file->getClientExtension();
$file->move(ROOTPATH.'public/assets/uploads/', $fileName);
log_message("info", $fileName . " saved to public upload folder");
novalis78
  • 61
  • 1
  • 5
3

Basically, if you want to simply reference images you should store them in your public/ folder in something like public/uploads, then just:

<img src="<?=base_url()?>public/uploads/Avatar.png" alt="Avatar">

On the writable/ folder topic and images, check that thread https://forum.codeigniter.com/thread-67352.html

For the rest, you'll have to do with the info from the docs about Uploaded files

  1. When you upload an image via <input type="file" name="avatar" /> it returns an array with the files infos to do stuff about. You can try to move it to the public/uploads folder with the $file->move(WRITEPATH.'public/uploads'); part, and see how it goes.

  2. Or... one way or another, just drop/upload your files in the public/ assets folder you want and reference them in the tag, it will just work.

Hope it helps, it just scratch the surface.

AndiKod
  • 64
  • 1
  • 5
2

Proper way is to make symlink to writable/uploads in public/uploads

ln -s [project_directory]/writable/uploads uploads

Now you can access files siteurl/uploads/ddmmyy/filename

1

if you put your image in the public folder then anyone can see it. if you want to prevent anyone to see the image, then the image in another (unreachable) folder makes sense. in the view, you image should be something like this:

<img src="/imageRender/<?= $someimage ?>" alt="image">

then you should have a route to serve this 'protected' images, like this:

$routes->match(['get', 'post'], 'imageRender/(:segment)', 'RenderImage::index/$1');

and finally the controller to serve the image:

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

class RenderImage extends Controller
{
    public function index($imageName)
    {
        if(($image = file_get_contents(WRITEPATH.'uploads/'.$imageName)) === FALSE)
            show_404();

        // choose the right mime type
        $mimeType = 'image/jpg';

        $this->response
            ->setStatusCode(200)
            ->setContentType($mimeType)
            ->setBody($image)
            ->send();

    }

}

in the controller you should do some check on the request, like if whoever is requesting the image is logged in or has the proper permission to see the image, otherwise you are back in the 'public folder' example, where anybody can see the image (and so, why go through so much trouble? :P ).

Dharman
  • 30,962
  • 25
  • 85
  • 135
0

if you want to retrieve the image in the writeable/uploads folder you may need to use some core php

$myimage = file_get_contents('../writable/uploads/imagename.jpg');
header('Content-Type: image/jpg');
echo $myimage;

I hope this helps

-1

I know this is late, but it works like a charm. This code is based on the following question: Is there a way to have a Codeigniter controller return an image?

<?php

namespace App\Controllers;

class Resource extends BaseController
{
    public function index($filename)
    {

        $filepath = WRITEPATH . 'uploads/' . $filename;

        $mime = mime_content_type($filepath);
        header('Content-Length: ' . filesize($filepath));
        header("Content-Type: $mime");
        header('Content-Disposition: inline; filename="' . $filepath . '";');
        readfile($filepath);
        exit();

    }
}

Basically you will serve the image from a controller and there is not need to have your images in the public folder. WRITEPATH will give you the path to your uploads folder. You can also apply some validation in the controller when calling your images.

Calling your image or any resource: http://localhost/resource/image.png

aldwinp35
  • 109
  • 1
  • 7