Upload image and create thumbnail in codeigniter – example

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
Upload image and create thumbnail in codeigniter

Hello Dev’s
Today now in this blog, we will learn about how to upload a image and also create thumbnail in codeigniter application. Uploading image and create thumbnail images are most important and required part of any web application. Codeigniter providing us uploading file and resize file by using library. so let’s start and see uses of codeigniter. Here we see how to Upload image and create thumbnail in codeigniter.

Step 1: Create view file

Now we will create a index.php file in view directory and also paste below code.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Upload image and create a thumbnail in codeigniter - nicesnippets.com</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>

Step 2: Create Upload Directory

Now we need to create a images folder for image upload on root project directory.

Step 3: Create controller

So now we will create a Upload.php controller file. When we choose upload image and click on submit button then that form will be 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);
		}
	}
}
?>

Read Also : How to remove key from array in jquery ?

Thanks for read. I hope it help you. For more you can follow us on facebook

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →