Photo upload, Crop and Save using Codeigniter - php

Question

We are working on a social network project based on CI framework. I searched on the web but got confused. How to upload photo, allow user to crop the photo and save it using database so that it could be retrieved at the time of call? I'm using this for profile picture.
On view:
<?php echo form_open_multipart ('index.php/Main/do_upload'); ?>
<table class="table">
<tr>
<td>Title</td>
<td><?php echo form_input('title'); ?></td>
</tr>
<tr>
<td>Image</td>
<td><?php echo form_upload('userfile'); ?></td>
</tr>
<tr>
<td></td>
<td><?php echo form_submit('submit', 'Save', 'class="btn btn-primary"'); ?></td>
<?php echo form_close(); ?>
</tr>
</table>
On controller:
public function do_upload()
{
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = 100;
$config['max_width'] = 1024;
$config['max_height'] = 768;
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload('userfile'))
{
$error = array('error' => $this->upload->display_errors());
$this->load->view('Material_view', $error);
}
else
{
$data = array('upload_data' => $this->upload->data());
$this->load->view('upload_success', $data);
}
}

Answer 1

Use Bluimp Multiple fileupload (https://blueimp.github.io/jQuery-File-Upload) and Croppr (https://fengyuanchen.github.io/cropperjs/) plugins together.
In Bluimp you can get enough code (there is a codeigniter class in their site) to handle file upload in codeigniter.

Answer 2

Please try with cropper js. i have used this and it is very easy and it will full fill your requirement
https://github.com/fengyuanchen/cropper

Answer 3

Create A Image model and paste the code
<?php
class Image_model extends CI_Model {
public function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->library('upload');
$this->load->library('image_lib');
}
public function do_resize($filename)
{
$source_path = 'uploads/' . $filename;
$target_path = 'uploads/thumb/thumb_'.$filename;
$config_manip = array(
'image_library' => 'gd2',
'source_image' => $source_path,
'new_image' => $target_path,
'maintain_ratio' => TRUE,
'width' => 150,
'height' => 150
);
$this->image_lib->initialize($config_manip);
$this->load->library('image_lib', $config_manip);
if (!$this->image_lib->resize()) {
echo $this->image_lib->display_errors();
die();
}
}
public function img_upload()
{
$config = array(
'upload_path' => "uploads",
'allowed_types' => "*",
'overwrite' => TRUE,
'max_size' => "5048000", // Can be set to particular file size , here it is 2 MB(2048 Kb)
'max_height' => "3000",
'max_width' => "3000"
);
$this->upload->initialize($config);
$this->load->library('upload', $config);
if($this->upload->do_upload()) {
$response = array('upload_data' => $this->upload->data());
$this->do_resize($response['upload_data']['file_name']);
}
/*else{
$error = array('error'=>$this->upload->display_errors());
//print_r($error);die();
}*/
}
}
Call this function like this in your controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Post extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('image_model');
}
public function add() {
if(isset($_FILES)){
$config = $this->image_model->img_upload();
$file_data = $this->upload->data();
$data['feature_image'] = $file_data['file_name'];
}
$lat_id = $this->your_model->save($data);
}