Image uploading and manipulating them can be such a pain in the you-know-what. Even if you are working in a awesome framework like Codeigniter . So, we are gonna keep a code safe in this blog, which we can always come back and “copy paste” when and where required. What are we aiming here ? I am building a website with lots of users in it and users have a profile with profile pic. User can upload pic and use it as their avatar for the site. User can upload the picture of any size and we need to manipulate it to fit our requirement. Simple! Lets start then.

1) Upload an Image (duh! )

2) Manipulate it and create a thumbnail for it ! ( oh, yeah 😉 ! )

3) Display it where ever required !

Lets begin !

Step 1 – Create the controller

It is always safe to start with a controller when it comes to codeigniter.

public function edit_profilepic(){
//show($_FILES);
if($_FILES['avatar']['error'] == 0){
//upload and update the file
$config['upload_path'] = './data/images/profile/'; // Location to save the image
$config['allowed_types'] = 'gif|jpg|png';
$config['overwrite'] = false;
$config['remove_spaces'] = true;
//$config['max_size'] = '100';// in KB // if required, remove the comment and give the size

$this->load->library('upload', $config); //codeigniter default function

if ( ! $this->upload->do_upload('avatar')){
redirect("user/profile/".$username); // redirect page if the load fails.
}
else{
//Image Resizing
$config['source_image'] = $this->upload->upload_path.$this->upload->file_name;
$config['maintain_ratio'] = FALSE;
$config['width'] = 200; // image re-size properties
$config['height'] = 300; // image re-size properties

$this->load->library('image_lib', $config); //codeigniter default function

if ( ! $this->image_lib->resize()){
redirect("user/profile/".$username); // redirect page if the resize fails.
}

$this->obj_model->update_profile_pic($this->tank_auth->get_user_id()); // here we are using the tank auth library for user log-in. we are getting the user id and updating the resized image as that particular's avatar.
redirect("user/profile/".$username);
}
}
else{
//show an error to select a picture before clicking the update pic button
redirect("user/profile/".$username);
}
}

Here I have created a controller function called “edit_profilepic” and rest is self explanatory via comments.

Step 2 : Create the View

The view file contains your upload form. If the user has selected the avatar ever before, display that. If not then, display the default images. Underneath , display the upload form with the submit button.

<div id="profile_page">
<ul>
<?php if(isset($avatar)) // if the avatar has been uploaded then display it?>
<img src="<?php echo base_url().$avatar; ?>" />
<?php
// underneath display the form to update the picture
echo form_open_multipart('user/edit_profilepic');
$Fdata = array('name' => 'avatar', 'class' => 'file'); // set your file and class for the image
echo form_upload($Fdata); // upload the datas here the image that user has selected.
echo form_submit('mysubmit', 'UpdatePic'); // your submit button fucntion
?>

</ul>
</div>

Step 3 : Create the Model to upload to database

public function update_profile_pic($user_id){
show($user_id);
if($_FILES['avatar']['error'] == 0){
$relative_url = 'data/images/profile/'.$this->upload->file_name;
$profile_data['avatar'] = $relative_url;
}
$this->db->where('id', $user_id);
$this->db->update('user_profiles', $profile_data);
}

That’s all . (what is it over, just like that ?) . Yeah.

Any assistance required, just leave it in the comment section below !