CodeIgniter 4 Multiple Image File Upload Example

In this tutorial, we will show you how to upload multiple images in CodeIgniter 4. We will use the File Uploading Class to upload multiple images.

First, we will create a view file to upload multiple images. Create a file named upload_multiple_images.php in the application/views folder and add the following code in it:

CodeIgniter 4 Multiple Image File Upload Example

CodeIgniter 4 Multiple Image File Upload Example

Next, we will create a controller file to upload multiple images. Create a file named Upload.php in the application/controllers folder and add the following code in it:

foreach ($files as $file)
$file->move(WRITEPATH . ‘uploads’);

Finally, we will create a route to access the view file. Open the routes.php file in the application/config folder and add the following route in it:

$routes->get(‘upload’, ‘Upload::upload_multiple_images’);

Now, you can access the view file by visiting the following URL in your browser:


You should see the following page:

CodeIgniter 4 Multiple Image File Upload Example

Choose multiple images and click on the Upload button. The images will be uploaded to the uploads folder.

CodeIgniter 4 multiple image/file upload example tutorial. Here, you will learn how to insert /upload multiple images in the database using CodeIgniter 4 application.

When you are working with Codeigniter 4 application. So many times you need to upload multiple images and files to the server simultaneously. So this tutorial will help you to upload  multiple files / images in CodeIgniter 4  into the database

CodeIgniter 4 Multiple Image File Upload with Validation Example

Follow the below steps and easily upload/insert multiple images using in folder and store into the database in CodeIgniter 4 projects:

  • Step 1: Setup Codeigniter Project

  • Step 2: Basic Configurations
  • Step 3: Create Database With Table
  • Step 4: Setup Database Credentials
  • Step 5: Create Controller
  • Step 6: Create Views
  • Step 7: Start Development server

Step 1: Setup Codeigniter Project

In this step, we will download the latest version of Codeigniter 4, Go to this link Download Codeigniter 4 fresh new setup and unzip the setup in your local system xampp/htdocs/ . And change the download folder name “demo”

Step 2: Basic Configurations

Next, we will set some basic configuration on the app/config/app.php file, so let’s go to application/config/config.php and open this file on text editor.

Set Base URL like this

public $baseURL = 'http://localhost:8080';
public $baseURL = 'http://localhost/demo/';

Step 3: Create Database With Table

In this step, we need to create a database name demo, so let’s open your PHPMyAdmin and create the database with the name demo. After successfully create a database, you can use the below SQL query for creating a table in your database.

    id int(11) NOT NULL AUTO_INCREMENT COMMENT 'Primary Key',
    name varchar(100) NOT NULL COMMENT 'Name',
    type varchar(255) NOT NULL COMMENT 'file type',
    created_at varchar(20) NOT NULL COMMENT 'Created date',
    PRIMARY KEY (id)

Step 4: Setup Database Credentials

In this step, we need to connect our project to the database. we need to go app/Config/Database.php and open database.php file in text editor. After opening the file in a text editor, We need to set up database credentials in this file like below.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'demo',
		'DBDriver' => 'MySQLi',
		'DBPrefix' => '',
		'pConnect' => false,
		'DBDebug'  => (ENVIRONMENT !== 'production'),
		'cacheOn'  => false,
		'cacheDir' => '',
		'charset'  => 'utf8',
		'DBCollat' => 'utf8_general_ci',
		'swapPre'  => '',
		'encrypt'  => false,
		'compress' => false,
		'strictOn' => false,
		'failover' => [],
		'port'     => 3306,

Step 5: Create Controller

Now Go to app/Controllers and create a controller name Form.php. In this controller, we will create some method/function. We will build some of the methods like :

  • multipleImage() – This is used to display file/image upload form.
  • storeMultipleFile() – This is used to upload multiple file/image into MySQL database and folder.
<?php namespace App\Controllers;

use CodeIgniter\Controller;

class Form extends Controller

    public function multipleImage()
         return view('multiple-image');

    public function storeMultipleFile()

        helper(['form', 'url']);

        $db      = \Config\Database::connect();
        $builder = $db->table('file');

        $msg = 'Please select a valid files';
        if ($this->request->getFileMultiple('file')) {

             foreach($this->request->getFileMultiple('file') as $file)

                $file->move(WRITEPATH . 'uploads');

              $data = [
                'name' =>  $file->getClientName(),
                'type'  => $file->getClientMimeType()

              $save = $builder->insert($data);
              $msg = 'Files has been uploaded';

       return redirect()->to( base_url('public/index.php/form/multipleImage') )->with('msg', $msg);



Step 6: Create Views

Now we need to create multiple-image.php, go to application/views/ folder and create multiple-image.php file. and update the following HTML into your files:

<!DOCTYPE html>
  <title>Codeigniter 4 Multiple Image upload example</title>
 <link rel="stylesheet" href="">

 <div class="container">
    <?php if (session('msg')) : ?>
        <div class="alert alert-info alert-dismissible">
            <?= session('msg') ?>
            <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
    <?php endif ?>

    <div class="row">
      <div class="col-md-9">
        <form action="<?php echo base_url('public/index.php/form/storeMultipleFile');?>" name="ajax_form" id="ajax_form" method="post" accept-charset="utf-8" enctype="multipart/form-data">

          <div class="form-group">
            <label for="formGroupExampleInput">Select Files</label>
            <input type="file" name="file[]" class="form-control" id="file" multiple>

          <div class="form-group">
           <button type="submit" id="send_form" class="btn btn-success">Submit</button>


Step 7: Start Development server

For start development server, Go to the browser and hit below the URL.



In this Codeigniter 4 ajax image upload with preview example tutorial. You have learned how to upload image in CodeIgniter 4 projects using jQuery ajax with preview.

Recommended Codeigniter Posts

If you have any questions or thoughts to share, use the comment form below to reach us.


Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.


Jassweb, Rai Chak, Punjab, India. 143518
Item added to cart.
0 items - 0.00