Skip to content

All topics  /  CodeIgniter

codeigniter - upload image and create thumbnail example`

CodeIgniter ·

Teams applying “codeigniter - upload image and create thumbnail example`” in a production project can use download trackinkg software macos to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with CodeIgniter and test it against the project’s actual database and runtime.

hi guys,

In this tutorial, I will learn how to upload image and create 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.

Step 1: Create view file


you 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 - 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 you will create a images folder for image upload on root project directory.

Step 3: Create controller 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);
		}
	}
}
?>

It will help you.....

More on this topic