CodeIgniter Image Upload and Resize

Posted Nov 20, 2009 in Development // 5 comments

One common thing that most developers will want to do when creating a web application with CodeIgniter is to give their users the ability to upload a profile image. Your code should be able to resize that profile image to the standard size that your design calls for. CodeIgniter provides two great classes to help make this a piece of cake.

The two library classes we will be working with are the File Uploading and Image Manipulation classes. With these two classes and the CodeIgniter User Guide you can probably figure out most of what you need, but I'll make it even easier for you. First, we will start with what you need in the View. This will create your file upload field:

The View

$Fdata = array('name' => 'user_avatar', 'class' => 'file');
echo form_upload($Fdata);

Also, make sure your form is using 'form_open_multipart'. Now we will move on to the Controller, where the bulk of the code is. The process here is to configure the upload, do the upload, configure the image resizing and then do the image resize. Here's what you should end up with:

The Controller

if($_FILES['user_avatar']['error'] == 0){
	//upload and update the file
	$config['upload_path'] = './images/profile/';
	$config['allowed_types'] = 'gif|jpg|png';
	$config['overwrite'] = false;
	$config['remove_spaces'] = true;
	//$config['max_size']	= '100';// in KB
	
	$this->load->library('upload', $config);

	if ( ! $this->upload->do_upload('user_avatar'))
	{
		$this->session->set_flashdata('message', $this->upload->display_errors('
', '
'));
		redirect('profile');
	}	
	else
	{
		//Image Resizing
		$config['source_image'] = $this->upload->upload_path.$this->upload->file_name;
		$config['maintain_ratio'] = FALSE;
		$config['width'] = 40;
		$config['height'] = 40;

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

		if ( ! $this->image_lib->resize()){
			$this->session->set_flashdata('message', $this->image_lib->display_errors('
', '
'));				
		}
		
		$this->MUser->updateProfile($this->input->post('user_id'));
		//Need to update the session information if email was changed
		$this->session->set_userdata('email', $this->input->xss_clean($this->input->post('user_email')));
		$this->session->set_flashdata('message', '
Your Profile has been Updated!
');
		redirect('profile');
	}
}

You may need to make some changes to a couple of the configuration options to get what you want. You'll also notice at the bottom that I update some of my user session information afterwards. Next up, we'll handle the updateProfile function within the User Model. This part is pretty simple:

The Model

function updateProfile($user_id){
	$profile_data = array(
	'name' => $this->input->xss_clean($this->input->post('user_name')),
	'email' => $this->input->xss_clean($this->input->post('user_email')),
	'role' => $this->input->xss_clean($this->input->post('user_role')),
	'website' => $this->input->xss_clean($this->input->post('user_website'))
	);
	//check if password was updated
	if($this->input->post('user_password') != ''){
		$profile_data['password'] = md5($this->input->xss_clean($this->input->post('user_password')));
	}
	if($_FILES['user_avatar']['error'] == 0){
		$relative_url = 'images/profile/'.$this->upload->file_name;
		$profile_data['avatar'] = $relative_url;
	}
	$this->db->where('id', $user_id);
	$this->db->update('user', $profile_data);
}

Normally you would want your path to pull from the configuration options you set using $upload['full_path'], but for some reason I've had issues pulling that data from the upload.

Tags: CodeIgniter, Coding, Development, Frameworks, Webapps

Twitter Facebook Delicious Digg StumbleUpon Reddit