Codeigniter 4 Ajax Image Upload with Preview Example

In this article, we will explain to you how to ajax Image Upload With Preview in CodeIgniter 4(Codeigniter 4 Ajax Image Upload with Preview Example). so we will give you a simple example of codeigniter 4 upload image. we can easily upload the image using ajax in CodeIgniter 4.

In this example, we use the preview image file function for the preview image. which is occurs on change the image. here we also use jquery image validation in CodeIgniter 4. so you can see our following example.
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 and Model
Step 6: Create Views Files
Step 7: Run The Application

Step 1: Download Codeigniter
If you want to download or install the latest version of CodeIgniter 4 then you can go to Codeigniter’s official site and download the latest version of Codeigniter 4. after the downloaded you can configure in “xampp/htdocs/” directory.

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 IF NOT EXISTS `students` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(64) NOT NULL,
  `last_name` varchar(64) NOT NULL,
  `address` text NOT NULL,
  `email` varchar(64) NOT NULL,
  `mobile` varchar(12) NOT NULL,
  `image` varchar(164) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

CREATE TABLE IF NOT EXISTS `students` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`first_name` varchar(64) NOT NULL,

`last_name` varchar(64) NOT NULL,

`address` text NOT NULL,

`email` varchar(64) NOT NULL,

`mobile` varchar(12) NOT NULL,

`image` varchar(164) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=15 ;

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

'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 and Model
In this step, we will create the “Student.php” controller and the “StudentModel.php” model.
app/Controllers/Student.php

<?php 

namespace App\Controllers;
 
use CodeIgniter\Controller;
use App\Models\StudentModel;
 
class Student extends Controller
{
 
	public function __construct()
    {
        helper(['form', 'url']);
    }
    public function index()
    {    
        return view('add');
    }    
 
    public function store()
    { 
		$rules = [
			'txtFname' => 'required',
            'txtLname' => 'required',
            'txtEmail' => 'required|valid_email',
            'txtMobile' => 'required|min_length[10]|numeric',
            'txtAddress' => 'required',
			"image" => [
				'uploaded[image]',
                'mime_in[image,image/jpg,image/jpeg,image/gif,image/png]',
                'max_size[image,4096]',
			],
		];
		
		if (!$this->validate($rules)) {
			$resData = [
			 'success' => false,
			 'data' => '',
			 'msg' => $this->validator
			];
		} else {
			$image = $this->request->getFile('image');
            $image->move(WRITEPATH . 'uploads');
		  
			$data = [
			 'first_name' => $this->request->getVar('txtFname'),
			 'last_name'  => $this->request->getVar('txtLname'),
			 'email'  => $this->request->getVar('txtEmail'),
			 'mobile'  => $this->request->getVar('txtMobile'),
			 'address'  => $this->request->getVar('txtAddress'),
			 'image'  => $image->getClientName(),
			];
			 
			$model = new StudentModel(); 
			$save = $model->insert($data);
			$resData = [
			 'success' => true,
			 'data' => $save,
			 'msg' => "Student has been added successfully"
			];			 
		}
		return $this->response->setJSON($resData);
		
    }
 
}

?>

<?php

namespace App\Controllers;

use CodeIgniter\Controller;

use App\Models\StudentModel;

class Student extends Controller

{

public function __construct()

{

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

}

public function index()

{

return view('add');

}

public function store()

{

$rules = [

'txtFname' => 'required',

'txtLname' => 'required',

'txtEmail' => 'required|valid_email',

'txtMobile' => 'required|min_length[10]|numeric',

'txtAddress' => 'required',

"image" => [

'uploaded[image]',

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

'max_size[image,4096]',

];

if (!$this->validate($rules)) {

$resData = [

'success' => false,

'data' => '',

'msg' => $this->validator

];

} else {

$image = $this->request->getFile('image');

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

$data = [

'first_name' => $this->request->getVar('txtFname'),

'last_name' => $this->request->getVar('txtLname'),

'email' => $this->request->getVar('txtEmail'),

'mobile' => $this->request->getVar('txtMobile'),

'address' => $this->request->getVar('txtAddress'),

'image' => $image->getClientName(),

];

$model = new StudentModel();

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

$resData = [

'success' => true,

'data' => $save,

'msg' => "Student has been added successfully"

];

}

return $this->response->setJSON($resData);

}

app/Models/StudentModel.php

<?php 
namespace App\Models;
use CodeIgniter\Database\ConnectionInterface;
use CodeIgniter\Model;
 
class StudentModel extends Model
{
    protected $table = 'Students';
 
    protected $allowedFields = ['first_name','last_name','address','email', 'mobile','image'];
}
?>

<?php

namespace App\Models;

use CodeIgniter\Database\ConnectionInterface;

use CodeIgniter\Model;

class StudentModel extends Model

{

protected $table = 'Students';

protected $allowedFields = ['first_name','last_name','address','email', 'mobile','image'];

}

Step 6: Create Views Files
Finally, we will create the add.php in the app/views directory.

app/views/add.php

<!DOCTYPE html>
<html>
<head>
  <title>Codeigniter 4 Ajax Image Upload with Preview Example - XpertPhp</title>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<style>
.hideImage{
	display:none;
}
#preview-image{
	margin-top:10px;
	width:200px;
	height:200px;
}
</style>
</head>
<body>
 <div class="container">
	<div class="row">
		<div class="col-md-9">
			<h2>Add Student</h2>
		</div>
	</div>
    <div class="row">
      <div class="col-md-9">
        <form method="post" name="frmAddStudent" id="frmAddStudent"  enctype="multipart/form-data">
          <div class="form-group">
            <label for="txtFname">First Name</label>
			<input type="text" name="txtFname" class="form-control" id="txtFname" placeholder="Please enter first name" />
          </div> 
		   <div class="form-group">
            <label for="txtLname">Last Name</label>
			<input type="text" name="txtLname" class="form-control" id="txtLname" placeholder="Please enter last name" />
          </div> 
          <div class="form-group">
            <label for="txtEmail">Email</label>
			<input type="text" name="txtEmail" class="form-control" id="txtEmail" placeholder="Please enter email" />
          </div>
		<div class="form-group">
            <label for="txtMobile">Mobile</label>
			<input type="text" name="txtMobile" class="form-control" id="txtMobile" placeholder="Please enter mobile number." />
          </div>		  
          <div class="form-group">
            <label for="txtAddress">Address</label>
			<textarea name="txtAddress" class="form-control"></textarea>
          </div>
		  <div class="form-group">
            <label for="image">Image</label>
            <input type="file" name="image" class="form-control" id="image" onchange="previewImageFile(this);" accept="image/*" />
			<img src="" alt="Image preview" id="preview-image" class="hideImage">
          </div>
          <div class="form-group">
		   <input type="submit" value="Add" name="btnadd" id="btnadd" class="btn btn-success" />
          </div>
        </form>
      </div>
    </div>
	<span class="d-none alert alert-success mb-3" id="res_message"></span>
</div>
<script>
   if ($("#frmAddStudent").length > 0) {
      $("#frmAddStudent").validate({
    rules: {
      txtFname: {
        required: true,
      },
	  txtLname: {
        required: true,
      },
      txtEmail: {
        required: true,
        maxlength: 50,
        email: true,
      }, 
	  txtMobile: {
        required: true,
		number: true,
        maxlength: 12,
        minlength: 10,
      }, 
      txtAddress: {
        required: true,
      },
	   image: {
        required: true,
		extension: "png|jpeg|jpg|gif",
      },	
    },
    messages: {
      txtFname: {
        required: "Please enter first name",
      },
	   txtLname: {
        required: "Please enter last name",
      },
      txtEmail: {
        required: "Please enter valid email",
        email: "Please enter valid email",
        maxlength: "The email name should less than or equal to 50 characters",
     },      
	 txtMobile: {
        required: "Please enter mobile number",
		number:"Please enter numbers Only",
		maxlength: "The mobile number should less than or equal to 12 characters",
		minlength: "The mobile number should be 10 characters",
     },	
     txtAddress: {
        required: "Please enter address",
     },
	 image: {
        required: "Please choose image",
		extension: "Only PNG , JPEG , JPG, GIF File Allowed",
     },
    },
	submitHandler: function(form) {
		$('#btnadd').val('Sending..');
		$.ajax({
			url: "<?php echo site_url('student/store') ?>",
			type: "POST",
			data: new FormData(form),
			contentType: false,  
            cache: false,  
            processData:false,  
            dataType: "json",
			success: function(response) {
				console.log(response);
				if(response.success){
					$('#btnadd').val('Add');
					$('#res_message').html(response.msg);
					$('#res_message').show();
					$('#res_message').removeClass('d-none');
					$('#frmAddStudent')[0].reset();
					setTimeout(function() {
						$('#res_message').hide();
						$('#res_message').html('');
					}, 3000);
				}else{
					$('#res_message').html(response.msg);
					$('#res_message').show();
				}
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://xpertphp.com/codeigniter-4-google-pie-chart-example/" target="_blank" rel="nofollow" class="u38fa2ddf6830a85a435b8e3159bb5ede"><style>.u38fa2ddf6830a85a435b8e3159bb5ede{padding:0;margin:0;padding-top:1em!important;padding-bottom:1em!important;width:100%;display:block;font-weight:700;background-color:#eaeaea;border:0!important;border-left:4px solid #34495E!important;box-shadow:0 1px 2px rgba(0,0,0,.17);-moz-box-shadow:0 1px 2px rgba(0,0,0,.17);-o-box-shadow:0 1px 2px rgba(0,0,0,.17);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.17);text-decoration:none}.u38fa2ddf6830a85a435b8e3159bb5ede:active,.u38fa2ddf6830a85a435b8e3159bb5ede:hover{opacity:1;transition:opacity 250ms;webkit-transition:opacity 250ms;text-decoration:none}.u38fa2ddf6830a85a435b8e3159bb5ede{transition:background-color 250ms;webkit-transition:background-color 250ms;opacity:1.11;transition:opacity 250ms;webkit-transition:opacity 250ms}.u38fa2ddf6830a85a435b8e3159bb5ede .ctaText{font-weight:700;color:#464646;text-decoration:none;font-size:16px}.u38fa2ddf6830a85a435b8e3159bb5ede .postTitle{color:#000;text-decoration:underline!important;font-size:16px}.u38fa2ddf6830a85a435b8e3159bb5ede:hover .postTitle{text-decoration:underline!important}</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">See also</span>  <span class="postTitle">Codeigniter 4 Google Pie Chart Example</span></div></a></div>				
			}
		});
	}
    })
}
</script>
<script>
  function previewImageFile(input, id) {
    var output = document.getElementById('preview-image');
        output.removeAttribute("class");
        output.src = URL.createObjectURL(event.target.files[0]);
        output.onload = function() {
            URL.revokeObjectURL(output.src)
        }
 }
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

<!DOCTYPE html>

<html>

<head>

<title>Codeigniter 4 Ajax Image Upload with Preview Example - XpertPhp</title>

<style>

.hideImage{

display:none;

}

#preview-image{

margin-top:10px;

width:200px;

height:200px;

}

</style>

</head>

<body>

<h2>Add Student</h2>

</div>

<label for="txtFname">First Name</label>

</div>

</div>

<label for="txtEmail">Email</label>

</div>

<label for="txtMobile">Mobile</label>

</div>

<label for="txtAddress">Address</label>

</div>

<label for="image">Image</label>

</div>

</div>

</form>

</div>

</div>

if ($("#frmAddStudent").length > 0) {

$("#frmAddStudent").validate({

rules: {

txtFname: {

required: true,

txtLname: {

required: true,

txtEmail: {

required: true,

maxlength: 50,

email: true,

txtMobile: {

required: true,

number: true,

maxlength: 12,

minlength: 10,

txtAddress: {

required: true,

image: {

required: true,

extension: "png|jpeg|jpg|gif",

messages: {

txtFname: {

required: "Please enter first name",

txtLname: {

required: "Please enter last name",

txtEmail: {

required: "Please enter valid email",

email: "Please enter valid email",

maxlength: "The email name should less than or equal to 50 characters",

txtMobile: {

required: "Please enter mobile number",

number:"Please enter numbers Only",

maxlength: "The mobile number should less than or equal to 12 characters",

minlength: "The mobile number should be 10 characters",

txtAddress: {

required: "Please enter address",

image: {

required: "Please choose image",

extension: "Only PNG , JPEG , JPG, GIF File Allowed",

submitHandler: function(form) {

$('#btnadd').val('Sending..');

$.ajax({

url: "<?php echo site_url('student/store') ?>",

type: "POST",

data: new FormData(form),

contentType: false,

cache: false,

processData:false,

dataType: "json",

success: function(response) {

console.log(response);

if(response.success){

$('#btnadd').val('Add');

$('#res_message').html(response.msg);

$('#res_message').show();

$('#res_message').removeClass('d-none');

$('#frmAddStudent')[0].reset();

setTimeout(function() {

$('#res_message').hide();

$('#res_message').html('');

}, 3000);

}else{

$('#res_message').html(response.msg);

$('#res_message').show();

}

});

}

})

}

</script>

function previewImageFile(input, id) {

var output = document.getElementById('preview-image');

output.removeAttribute("class");

output.src = URL.createObjectURL(event.target.files[0]);

output.onload = function() {

URL.revokeObjectURL(output.src)

}

</script>

</body>

</html>

Step 7: Run The Application
We can start the server and run the codeigniter 4 application 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/student

1	http://localhost:8080/student

If you liked this article, you can also download it through our Github Repository.