CodeIgniter 4 Image File Upload Example

CodeIgniter 4 image file upload with validation example. In this tutorial guide, we will learn how to upload image file in Codeigniter 4 projects with server-side validation.

If you’re looking image that how to upload in CodeIgniter with the database, upload pdf file in CodeIgniter example or save uploaded image in the database by using CodeIgniter. So this tutorial is very helpful for you.

In this tutorial, we will make a form. And this form should have an input field whose type will be a file. In this, you can select any file. After this, to validate this file on the server, we will also define validation rules.

When the file becomes validate, we will insert it into the database and after that upload the file to the folder.

Image File Upload in Codeigniter 4 with Database Example

Follow the below steps and easily upload files in a folder and store in the database in CodeIgniter 4 projects with validation:

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 https://codeigniter.com/download 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';
To
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.

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

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 :

Index() – This is used to display file/image upload form.
Store() – This is used to validate form file/image on server-side and store into MySQL database and folder.

<?php namespace App\Controllers;

use CodeIgniter\Controller;

class Form extends Controller
{
    public function index()
    {    
         return view('form');
    }

   public function store()
   {  

	 helper(['form', 'url']);
        
	 $db      = \Config\Database::connect();
         $builder = $db->table('file');

        $validated = $this->validate([
            'file' => [
                'uploaded[file]',
                'mime_in[file,image/jpg,image/jpeg,image/gif,image/png]',
                'max_size[file,4096]',
            ],
        ]);

        $msg = 'Please select a valid file';
 
        if ($validated) {
            $avatar = $this->request->getFile('file');
            $avatar->move(WRITEPATH . 'uploads');

          $data = [

            'name' =>  $avatar->getClientName(),
            'type'  => $avatar->getClientMimeType()
          ];

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

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

	}
}

Step 6: Create Views

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

<!DOCTYPE html>
<html>
<head>
  <title>Codeigniter 4 Image upload example</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/store');?>" name="ajax_form" id="ajax_form" method="post" accept-charset="utf-8" enctype="multipart/form-data">

          <div class="form-group">
            <label for="formGroupExampleInput">Name</label>
            <input type="file" name="file" class="form-control" id="file">
          </div> 

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

    </div>
 
</div>
</body>
</html>

This below line display error messages on your web page:

   <?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 ?>

Step 7: Start Development server

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

http://localhost/demo/public/index.php/form

Conclusion

In this Codeigniter 4 file upload example tutorial. You have learned how to upload files/images in CodeIgniter 4 projects with server-side validation.