Codeigniter 4 Upload Multiple Images Example

CodeIgniter 4 multiple file or image upload tutorial. In this example, i will guide you on how to upload multiple images and files in Codeigniter 4 apps.

Uploading multiple files or images are a very common thing of any web applications. If you are creating any form with multiple image and file upload field in codeigniter 4 app. And as well as, want to store files or images into database and directory in codeigniter 4 apps. So, in this tutorial, you will learn how to upload multiple images and files in codeigniter 4 apps.

For the CodeIgniter 4 multiple image upload example , I’ll create a multiple image upload form. And store multiple image into database and codeigniter 4 apps directory using this multiple image upload form.

Multiple Image and File Upload in Codeigniter 4

Install Codeigniter 4 Application
Basic App Configurations
Create Database and Table
Setup Database Credentials
Create Controller
Create Views
Setup Routes
Start Development server

Step 1 – Install Codeigniter 4 Application

First of all, you need to ownload the latest version of Codeigniter 4. So, visit this link https://codeigniter.com/download Download Codeigniter 4 app and unzip the setup in your local system xampp/htdocs/ .

Note that, please change the download folder name “demo”.

Step 2 – Basic App Configurations

Now, you need to 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';
To
public $baseURL = 'http://localhost/demo/';

Step 3 – Create Database and Table

Create a table by executing the following SQL query:

CREATE DATABASE demo;

CREATE TABLE images (
    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)
  ) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='demo table' AUTO_INCREMENT=1;

Step 4 – Setup Database Credentials

To connect your codeigniter 4 app to the database. So, visit app/Config/ directory and open Database.php. Then add the databasae details like below into database.php file:

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

Step 5 – Create Controller

Create UploadMultipleFiles.php file. So, visit app/Controllers directory and create UploadMultipleFiles.php.Then add the following code into it:

<?php 
namespace App\Controllers;
use CodeIgniter\Controller;

class UploadMultipleFiles extends Controller
{

    public function index() {
        return view('upload_multiple_files');
    }

    function uploadFiles() {
        helper(['form', 'url']);
 
        $database = \Config\Database::connect();
        $db = $database->table('users');
 
        $msg = 'Please select a valid files';
  
        if ($this->request->getFileMultiple('images')) {
 
             foreach($this->request->getFileMultiple('images') as $file)
             {   
 
                $file->move(WRITEPATH . 'uploads');
 
              $data = [
                'name' =>  $file->getClientName(),
                'type'  => $file->getClientMimeType()
              ];
 
              $save = $db->insert($data);
              $msg = 'Files have been successfully uploaded';
             }
        }
 
        return redirect()->to( base_url('/') )->with('msg', $msg);        
    }

}

index() – It renders the multiple images and files uploading form in Codeigniter 4 view.
uploadFiles() – This functions helps in uploading the multiple files and images in database and directory.

Step 6 – Create Views

Create upload_multiple_files.php view file, so visit application/views/ directory and create upload_multiple_files.php file. Then add the following HTML into upload_multiple_files.php file:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Upload Multiple Files or Images in Codeigniter 4 - laratutorials.com</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .container {
      max-width: 500px;
    }
  </style>
</head>

<body>
  <div class="container mt-5">
    <?php if (session('msg')) : ?>
        <div class="alert alert-success mt-3">
            <?= session('msg') ?>
        </div>
    <?php endif ?>    

    <form method="post" action="<?php echo base_url('UploadMultipleFiles/uploadFiles');?>" 
    enctype="multipart/form-data">
      <div class="form-group mt-3">
        <input type="file" name='images[]' multiple="" class="form-control">
      </div>

      <div class="form-group">
        <button type="submit" class="btn btn-danger">Upload</button>
      </div>
    </form>

  </div>
</body>

</html>

Step 7 – Setup Routes

To define a route, So, visit app/Config/ directory and open Routes.php file. Then add the following routes into it:

$routes->setDefaultController('UploadMultipleFiles');
$routes->get('/', 'UploadMultipleFiles::index');

Note that, the routes will be displaying the multiple image or file upload form and submitting the data in the database on successful form submission.

Step 8 – Start Development server

Execute the following command into command prompt or terminal to start the codeigniter 4 application:

php spark serve

Then visit your web browser and hit the following url on it:

http://localhost/demo/

OR

http://localhost:8080/

Conclusion

CodeIgniter 4 multiple image and file example tutorial. In this example, you have learned how to upload multiple images and files in Codeigniter 4 apps. And also will learned how to store multiple image into db and directory..