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

By : Fiona Brown Fiona Brown
Hours Updated

⚡ Smart Summary

CodeIgniter File Upload uses the built-in Upload library to move images and documents from an HTML form to a server directory. This example builds an upload form, a controller that validates type and size, and a results page confirming the upload.

  • 📁 Core Class: The Upload library handles the backend work of validating a submitted file and writing it to the chosen upload directory.
  • 🖼️ Two Parts: An upload needs a frontend HTML form with an input type file plus a backend controller that processes the submission.
  • 🔒 Type Whitelist: The allowed_types config accepts only listed extensions such as gif, jpg, and png, blocking risky files like PHP scripts.
  • 📏 Size Limits: The max_size, max_width, and max_height keys reject files that exceed the limits and return a clear error message.
  • 📝 Form Encoding: The form must set enctype to multipart/form-data, otherwise the selected file never reaches the server.
  • 📄 Result Metadata: On success, upload->data() returns file details used to build a link to the newly stored image.
  • 🤖 AI Assist: AI tools can generate the upload form, controller validation rules, and error handling, then review them for security gaps.
Read More

CodeIgniter File Upload

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, and more. If you are working on a membership site, you may need to make provision for people to upload their profile images. The CodeIgniter 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 us begin with the input form.

Create a new directory called files in the 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(0)?>" 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 browse to their computer and select a file for uploading.

RELATED ARTICLES

Add 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 newly 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 us 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 ensure that only images are uploaded and other file types such as PHP cannot be uploaded, because they have the potential to compromise the server.
    • $config[‘max_size’] = 2000; sets 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 us 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 add two routes to our routes.php file that will display the form and display the results.

Open application/config/routes.php and 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.

How to Fix Common CodeIgniter File Upload Errors

Most upload failures return a clear message from the Upload library. The list below maps the common errors to their fixes.

  • The filetype you are attempting to upload is not allowed: add the missing extension to the allowed_types config, for example ‘gif|jpg|png|pdf’.
  • The file you are attempting to upload is larger than the permitted size: raise max_size, and confirm upload_max_filesize and post_max_size in php.ini are large enough.
  • The upload path does not appear to be valid: create the upload_path directory and make sure the web server has write permission on it.
  • You did not select a file to upload: check that the input name matches the do_upload() argument and that the form uses enctype multipart/form-data.

Testing the application

Let us start the built-in PHP server.

Open the terminal or 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

Uploading Images in CodeIgniter

Click on choose file

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

Uploading Images in CodeIgniter

Select your desired image, then click on open

Uploading Images in CodeIgniter

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

You will get the following results, assuming everything goes well.

Uploading Images in CodeIgniter

Click on the View My Image! link

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

Uploading Images in CodeIgniter

Notice the 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.

FAQs

The CodeIgniter 3 Upload library handles one file per do_upload() call, so you loop over $_FILES and call it for each item. CodeIgniter 4 supports multiple uploads directly through the getFileMultiple() method.

No. CodeIgniter 4 replaces the Upload library with the Request file API. You call $this->request->getFile(‘field’), validate it, then use move() to store the file, instead of loading a separate upload library.

Set $config[‘encrypt_name’] = TRUE to give each file a random name, or set $config[‘file_name’] to a value you choose. This prevents overwriting existing files that share the same original name.

Yes. AI can produce the allowed_types whitelist, size limits, and error handling, and suggest extra checks such as verifying the real MIME type. Always test the generated rules against real files before deployment.

Yes. Paste the error message and your controller, and AI can pinpoint issues like a missing multipart form, a non-writable upload_path, or an extension missing from allowed_types, then suggest the fix.

Summarize this post with: