Upload image and create a thumbnail in codeigniter

In this tutorial, We will tell you how to upload image and create a thumbnail in codeigniter. upload image and create thumbnail images are most important part of the website. Codeigniter providing uploading file and resize file library. so let’s uses of codeigniter.

Step1: Create view file

We will create a index.php file in view directory and paste below code.

<!DOCTYPE html>
	<html lang="en">
	<head>
	  <title>Upload image and create a thumbnail in codeigniter - 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.0/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> 
	</head>
	<body>

	<div class="container">
	  <div class="row">
		<div class="col-lg-12"> 
		  <form id="productImage" action="<?php echo site_url('upload');?>" name="productImage" method="post" enctype="multipart/form-data">
			<div class="form-group">
			  <label for="email">Choose Product Images:</label>
			  <input name="productImage" type="file"  /> 
			</div>
			<button type="submit" value="Submit" class="btn btn-default">Submit</button>
		  </form>
	   </div>
	 </div>
	</div>
	</body>
	</html>

<!DOCTYPE html>

<head>

<title>Upload image and create a thumbnail in codeigniter - XpertPhp</title>

</head>

<body>

<form id="productImage" action="<?php echo site_url('upload');?>" name="productImage" method="post" enctype="multipart/form-data">

<label for="email">Choose Product Images:</label>

</div>

<button type="submit" value="Submit" class="btn btn-default">Submit</button>

</form>

</div>

</body>

</html>

Step2: Create Upload Directory

Now, we will create a images folder for image upload on root project directory.

Step 3: Create controller

Finally, we will create a Upload.php controller file. when you choose upload image and click on submit button then that form will call upload controller’s index method.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Upload extends CI_Controller {
	function __construct() {
		parent::__construct();
	}
	
	public function index()
	{
		$this->load->helper(array('form', 'url'));
		if($this->input->post('productImage'))
		{
			$file_name = time().'-'.$_FILES["image"]['name'];
			
			$config = array(
				'upload_path' => "./assets/images/",
				'allowed_types' => "gif|jpg|png|jpeg|JPEG|JPG|PNG|GIF",
				'overwrite' => TRUE,
				'max_size' => "26200",
				'max_width' => "650",
				'max_height' => "500",
				'file_name' => $new_name
			);
			$this->load->library('upload', $config);
	
			
			$data = $this->upload->data();
			
			// Create thumnail or resize image
			$config2 = array(
				'source_image'		=> $data['full_path'], //get original image
				'new_image'			=> $data['file_path'].'thumb', //save as new image //need to create thumbs first
				'maintain_ratio'	=> true,
				'width'				=> 150
			);

			$this->load->library('image_lib'); //load library
			$this->image_lib->initialize($config2);
			$this->image_lib->resize();
			$this->image_lib->clear();

			$this->load->view('index');
		}
		else
		{
			$this->load->view('index', $data);
		}
	}
}

?>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Upload extends CI_Controller {

function __construct() {

parent::__construct();

}

public function index()

{

$this->load->helper(array('form', 'url'));

if($this->input->post('productImage'))

{

$file_name = time().'-'.$_FILES["image"]['name'];

$config = array(

'upload_path' => "./assets/images/",

'allowed_types' => "gif|jpg|png|jpeg|JPEG|JPG|PNG|GIF",

'overwrite' => TRUE,

'max_size' => "26200",

'max_width' => "650",

'max_height' => "500",

'file_name' => $new_name

);

$this->load->library('upload', $config);

$data = $this->upload->data();

// Create thumnail or resize image

$config2 = array(

'source_image' => $data['full_path'], //get original image

'new_image' => $data['file_path'].'thumb', //save as new image //need to create thumbs first

'maintain_ratio' => true,

'width' => 150

);

$this->load->library('image_lib'); //load library

$this->image_lib->initialize($config2);

$this->image_lib->resize();

$this->image_lib->clear();

$this->load->view('index');

}

else

{

$this->load->view('index', $data);

}