Codeigniter 4 Multiple File and Image Upload Example

Apr 23, 2022 . Admin



Hi Dev,

In this quick example, let's see codeigniter 4 multiple file upload. This post will give you simple example of codeigniter 4 multiple image upload. you will learn multiple image upload in codeigniter. you'll learn multiple file uploading in codeigniter.

I will share with you how to upload multiple image in codeigniter 4 application. we can easily do multiple file upload example in codeigniter.

So, let's follow few bellow step to upload multiple file or images example:

Step 1: Install Codeigniter 4

This is optional; however, if you have not created the codeigniter app, then you may go ahead and execute the below command:

composer create-project codeigniter4/appstarter ci-news
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.

public $baseURL = 'http://localhost:8080';
To
public $baseURL = 'http://localhost/demo/';
Step 3: Create Database With Table

In this third 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.

CREATE TABLE files (
    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

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.

app/Config/Database.php 
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

So, in this step we will need to create app/Controllers and create a controller name Form.php. In this controller, we will create some method/function.

app/Controllers/Form.php 
<?php 
namespace App\Controllers;
use CodeIgniter\Controller;
 
class Form extends Controller
{
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function multipleImage()
    {    
         return view('multiple-image');
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    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

In this step now we require to engender multiple-image.php, go to application/views/ folder and engender multiple-image.php file. and update the following HTML into your files:

<!DOCTYPE html>
<html>
<head>
    <title>Codeigniter 4 Multiple Image upload example - MyWebtuts.com</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
    <br>
     
    <?php if (session('msg')) : ?>
        <div class="alert alert-info alert-dismissible">
            <?= session('msg') ?>
            <button type="button" class="close" data-dismiss="alert"><span>×</span></button>
        </div>
    <?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> 
     
                <div class="form-group">
                    <button type="submit" id="send_form" class="btn btn-success">Submit</button>
                </div>
              
            </form>
        </div>
    </div>
</div>
</body>
</html>
Step 7: Run Codeigniter App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Codeigniter app:

php spark serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8080/

It will help you....

#Codeigniter 4

You might also like...