How to Upload Image & File in CodeIgniter (with Example)

ByPaul Jackson Hours Updated

CodeIgniter File Upload

File management is essential to most web applications. If you are developing a content management system, then you will need to be able to upload images, word documents, pdf reports, etc. If you are working on a membership site, you may need to take a provision for people to upload their profile images. CodeIgniter’s File Uploading class makes it easy for us to do all of the above.

In this tutorial, we will look at how to use the file upload library to load files.

Uploading Images in CodeIgniter

File uploading in CodeIgniter has two main parts. The frontend and the backend. The frontend is handled by the HTML form that uses the form input type file. On the backend, the file upload library processes the submitted input from the form and writes it to the upload directory.

Let’s begin with the input form.

Create a new directory called files in application/views directory

Add the following files in application/views/files

  • upload_form.php – this view contains the HTML form that has the input type of file and submits the selected file to the server for processing
  • upload_result.php – this view displays the results of the uploaded image including a link that we can click to view the results.

Add the following code to upload_form.php

<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter Image Upload</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <h3>Select an image from your computer and upload it to the cloud</h3>
        <?php
                if (isset($error)){
                    echo $error;
                }
            ?>
            <form method="post" action="<?=base_url('store-image')?>" enctype="multipart/form-data">
                <input type="file" id="profile_image" name="profile_image" size="33" />
                <input type="submit" value="Upload Image" />
            </form>
    </div>
</body>
</html>

HERE,

  • if (isset($error)){…} checks if the error variable has been set. If the result is true then the error returned by the upload library is displayed to the user.
  • <input type=”file” id=”profile_image” name=”profile_image” size=”33″ /> the type file allows the user to browser to their computer and select a file for uploading.

Ad the following code to upload_result.php

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Results</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>
        <h3>Congratulations, the image has successfully been uploaded</h3>
        <p>Click here to view the image you just uploaded
            <?=anchor('images/'.$image_metadata['file_name'], 'View My Image!')?>
        </p>

        <p>
            <?php echo anchor('upload-image', 'Go back to Image Upload'); ?>
        </p>
    </div>
</body>
</html>

HERE,

  • <?=anchor(‘images/’.$image_metadata[‘file_name’], ‘View My Image!’)?> uses the anchor helper to create a link to the new uploaded file in the images directory. The name is retrieved from the image metadata that is passed to the view when the file has successfully been uploaded.

Let’s now create the controller that will respond to our image uploading

Add a new file ImageUploadController.php in application/controllers

Add the following code to ImageUploadController.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class ImageUploadController extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url', 'form');
    }

    public function index() {
        $this->load->view('files/upload_form');
    }

    public function store() {
        $config['upload_path'] = './images/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = 2000;
        $config['max_width'] = 1500;
        $config['max_height'] = 1500;

        $this->load->library('upload', $config);

        if (!$this->upload->do_upload('profile_image')) {
            $error = array('error' => $this->upload->display_errors());

            $this->load->view('files/upload_form', $error);
        } else {
            $data = array('image_metadata' => $this->upload->data());

            $this->load->view('files/upload_result', $data);
        }
    }

}

HERE,

  • class ImageUploadController extends CI_Controller {…} defines our controller class and extends the base controller CI_Controller
  • public function __construct() {…} initializes the parent constructor method and loads the url and form helpers
  • public function index() {…} defines the index method that is used to display the image upload form
  • public function store() {…} defines the method that will upload the image and store it on the web application server.
    • $config[‘upload_path’] = ‘./images/’; sets the directory where the images should be uploaded
    • $config[‘allowed_types’] = ‘gif|jpg|png’; defines the acceptable file extensions. This is important for security reasons. The allowed types ensures that only images are uploaded and other file types such as php cant be uploaded because they have the potential to compromise the server.
    • $config[‘max_size’] = 2000; set the maximum file size in kilobytes. In our example, the maximum file that can be uploaded is 2,000kb close to 2MB. If the user tries to upload a file larger than 2,000kb, then the image will fail to upload and the library will return an error message.
    • $config[‘max_width’] = 1500; sets the maximum width of the image which in our case is 1,500 px. Any width larger than that results in an error
    • $config[‘max_height’] = 1500; defines the maximum acceptable height.
    • $this->load->library(‘upload’, $config); loads the upload library and initializes it with the array $config that we defined above.
    • if (!$this->upload->do_upload(‘profile_image’)) {…} attempts to upload the submitted image which in our case is named profile_image
    • $error = array(‘error’ => $this->upload->display_errors()); sets the error message if the upload fails
    • $this->load->view(‘files/upload_form’, $error); loads the file upload form and displays the error message that is returned from the upload library
    • $data = array(‘image_metadata’ => $this->upload->data()); sets the image metadata if the upload has been successful
    • $this->load->view(‘files/upload_result’, $data); loads the uploaded successfully view and passes the uploaded file metadata.

That is it for the controller. Let’s now create the directory where our images will be uploaded to. Create a new directory “images” in the root directory of your application

Finally, we will ad two routes to our routes.php file that will display the form and display results

Open application/config/routes.php
Add the following routes
$route['upload-image'] = 'imageuploadcontroller';
$route['store-image'] = 'imageuploadcontroller/store';

HERE,

  • $route[‘upload-image’] = ‘imageuploadcontroller’; defines the URL upload-image that calls the index method of ImageUploadController
  • $route[‘store-image’] = ‘imageuploadcontroller/store’; defines the URL store-image that accepts the selected user file and uploads it to the server.

Testing the application

Let’s start the built-in PHP server

Open the terminal/ command line and browse to the root of your application. In my case, the root is located in drive C:\Sites\ci-app

cd C:\Sites\ci-app

start the server using the following command

php -S localhost:3000

Load the following URL in your web browser: http://localhost:3000/upload-image

you will be able to see the following results

Click on choose file

You should be able to see a dialog window similar to the following

Select your desired image then click on open

The selected file name will show up in the form upload as shown in the image above. Click on an upload image button

You will get the following results assuming everything goes well

Click on View My Image! Link

You should be able to see the image that you uploaded. The results will be similar to the following

Notice uploaded image name is displayed in the URL. We got the image name from the uploaded image metadata

Note: The File Upload process remains the same for other types of files

You Might Like: