Table of Contents

Retrieving Uploaded Images in CodeIgniter

In our previous lessons, we successfully uploaded files into the project directory and inserted the uploaded file name with extension to the database.

Let us retrieve and display an uploaded image. Here the selection of an image is based on a given username. That is, if you give a username, then database find and retrieve corresponding image name, then we will generate an image path for the required image. Finally displaying the image using HTML <img> tag.

Getting Image Name using Username

Controller function getimage() is used to retrieve image from the database.

Controller (getimage):

   public function getimage()
   {
     $this->load->helper('url');
     $this->load->view('user/getimage');
   }

This controller loads a view named getimage.

View: (getimage)

<html>
<head>
<title>Registration</title>
</head>
<body bgcolor="#b1ac4e">
<center>
<form action=<?php echo base_url()."user/findimage"?> method="post">
Username <input type="text" name='username'>
<input type="submit" value="Find Image">
</form>
</center>
</body>
</html>

This contains a form with an input box and a submit button. Input box named ‘username’ accept a user name and the form sends the input value into the controller function ‘findimage’.

Upload and show image files with codeigniter

Controller: findimage()

public function findimage()
   {
     $username = $this->input->post('username');
     $this->load->Model('ProjectModel');
     $imagename = $this->ProjectModel->selectimage($username);
     echo $imagename; //This is just a code for testing, you can remove it

$data = array(
‘image_name’ => $imagename
);
$this->load->helper(‘url’);
$this->load->view(“user/showimage”,$data);
}

Here

$imagename = $this->ProjectModel->selectimage($username);
Calls a model function ‘selectimage’ with a parameter of $username that we entered on the input box in view section.

Model: selectimage()

public function selectimage($username)
  {
    $this->load->database();
    $query = $this->db->query("Select user_pic from table_user where user_name= '$username'");
    $row = $query->row();
    return $row->user_pic;
  }

$query = $this->db->query(“Select user_pic from table_user where user_name= ‘$username'”);
Here query selects an image name from database that matches the username, and the retrieved value is returned to the controller.

In controller findimage,

$imagename = $this->ProjectModel->selectimage($username);
$imagename gets the return value.

As a testing, you can print its value using code echo $imagename.

$data = array(
‘image_name’ => $imagename
);
Here an array is created with a variable ‘image_name’ that contains our database retrieved image name.

$this->load->view(“user/showimage”,$data);
Here controller loads a view page with a parameter of data array.

View: (showimage.php)

<img src="<?php  echo base_url()."images/".$image_name; ?>" width=50% >

Explanation:

Here img tag displays an image, the path of the image is determined by database retrieved image name.

Generating the File Path:

Model query successfully retrieved the required file name. Now we have to generate the file path. We keep all our uploaded user pictures on the project folder ‘images’. See previous lesson for uploading a file. While uploading, we specified the uploading file directory, that was the ‘images’ folder on base_url. That is a folder on our project.

Localhost/myproject/images

While showing an image, we can find the same file using our database retrieved file name.

That should be: Localhost/myproject/images/database_retrieved_filename
or base_url/database_retrieved_filename

Sample output:

Display images from database in CodeIgniter

You can hide the file name by removing the code ‘echo $imagename’ from controller findimage. You can set the image anywhere on your view using HTML codes and CSS, that depends your needs.

Getting Uploaded Files in CodeIgniter – Displaying an Image From Database