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;
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, ];
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);
}
}
?>
Step 6: Create Routes
Add the following route code in the “app/config/Routes.php” file.
$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>
Step 8: Run The Application
We can start the server and run this example using the below command.
php spark serve
Now we will run our example using the below Url in the browser.
http://localhost:8080/image