CodeIgniter 4  Multiple Images / Files Upload Example

CodeIgniter 4 Multiple Images / Files Upload Example

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 File / Image Upload Example

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

  • Download Codeigniter Latest
  • Basic Configurations
  • Create Database With Table
  • Setup Database Credentials
  • Create Controller
  • Create Views
  • Start Development server

Step 1: Download 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.

Recommende CodeIgniter 4 Tutorial

  1. Install / Download Codeigniter 4 By Manual, Composer, Git
  2. Codeigniter 4 Remove Public and Index.php From URL
  3. Codeigniter 4 Application Folder / Directory Structure
  4. Create Controller, Model, View Example Codeigniter 4

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

Leave a Reply

Your email address will not be published. Required fields are marked *