codeigniter 4 image upload example tutorial

In this tutorial, We will inform you how to upload an image in CodeIgniter 4(Codeigniter 4 Image Upload Example). In this article, we cover the Codeigniter 4 image validation and upload the image of Codeigniter. So you can easily upload images using our article.

Overview
Step 1: Download Codeigniter
Step 2: Basic Configurations
Step 3: Create a Database in table
Step 4: Connect to Database
Step 5: Create Controller
Step 6: Create Routes
Step 7: Create Views Files
Step 8: Run The Application

Step 1: Download Codeigniter
If you want to download or install CodeIgniter 4 then you can below Url.
How To Install Codeigniter 4 Using Manual, Composer, Git

Step 2: Basic Configurations
If you want to Basic Configurations in your project then you can below Url.
Codeigniter 4 Removing Index.Php From Url

Step 3: Create a Database in table
In this step, We will create the database and table.

CREATE TABLE users (
    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',
    PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='users table' AUTO_INCREMENT=1;

CREATE TABLE users (

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',

PRIMARY KEY (id)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='users table' AUTO_INCREMENT=1;

Step 4: Connect to Database
Go to the “app/Config/Database.php” folder and open the database.php file some changes in this file like hostname, database username, database password, and database name.

	public $default = [
		'DSN'      => '',
		'hostname' => 'localhost',
		'username' => 'root',
		'password' => '',
		'database' => 'codeigniter4_image',
		'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,
	];

public $default = [

'DSN' => '',

'hostname' => 'localhost',

'username' => 'root',

'password' => '',

'database' => 'codeigniter4_image',

'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
In this step, we will create an “ImageUpload.php” controller.
app/Controllers/ImageUpload.php

<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
 
class ImageUpload extends Controller
{
 
    public function index()
    {    
        return view('image');
    }    
 
    public function upload_image()
    {    
         helper(['form', 'url']);
         
        $database = \Config\Database::connect();
        $db = $database->table('users');
    
        $input = $this->validate([
            'file' => [
                'uploaded[file]',
                'mime_in[file,image/jpg,image/jpeg,image/png]',
                'max_size[file,1024]',
            ]
        ]);
    
        if (!$input) {
             $msg = 'Choose a valid file';
        } else {
            $img = $this->request->getFile('file');
            $img->move(WRITEPATH . 'uploads');
    
            $data = [
               'name' =>  $img->getName(),
               'type'  => $img->getClientMimeType()
            ];
    
            $save = $db->insert($data);
        }
		return redirect()->to( base_url('image') )->with('msg', $msg);
    }
}

?>

<?php namespace App\Controllers;

use CodeIgniter\Controller;

class ImageUpload extends Controller

{

public function index()

{

return view('image');

}

public function upload_image()

{

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

$database = \Config\Database::connect();

$db = $database->table('users');

$input = $this->validate([

'file' => [

'uploaded[file]',

'mime_in[file,image/jpg,image/jpeg,image/png]',

'max_size[file,1024]',

]

]);

if (!$input) {

$msg = 'Choose a valid file';

} else {

$img = $this->request->getFile('file');

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

$data = [

'name' => $img->getName(),

'type' => $img->getClientMimeType()

];

$save = $db->insert($data);

}

return redirect()->to( base_url('image') )->with('msg', $msg);

}

Step 6: Create Routes
Add the following route code in the “app/config/Routes.php” file.

$routes->get('/image', 'ImageUpload::index');

1	$routes->get('/image', 'ImageUpload::index');

Step 7: Create Views Files
Finally, we will create an image.php in the app/views directory.
app/views/image.php

<!DOCTYPE html>
<html lang="en">
<head>
	<title>codeigniter 4 image upload example tutorial - XpertPhp</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	<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>
			</div>
		<?php endif ?>
		<form method="post" action="<?php echo base_url('ImageUpload/upload_image');?>" enctype="multipart/form-data">
		  <div class="form-group">
			<label>Image</label>
			<input type="file" name="file" class="form-control">
		  </div>
		  <button type="submit" class="btn btn-primary">Upload</button>
		</form>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>codeigniter 4 image upload example tutorial - XpertPhp</title>

</head>

<body>

<?php if (session('msg')) : ?>

<?= session('msg') ?>

</div>

<?php endif ?>

<form method="post" action="<?php echo base_url('ImageUpload/upload_image');?>" enctype="multipart/form-data">

<label>Image</label>

</div>

<button type="submit" class="btn btn-primary">Upload</button>

</form>

</div>

</body>

</html>

Step 8: Run The Application
We can start the server and run this example using the below command.

php spark serve

1	php spark serve

Now we will run our example using the below Url in the browser.

http://localhost:8080/image

1	http://localhost:8080/image