By

How to upload files in codeigniter or upload images with image preview

We have an inbuilt class for upload files in codeigniter. using upload class we can easily upload files or images in codeigniter. for upload we need to set some configuration and need to load upload library.

Setting up configuration :-

$config['upload_path']   = './upload/';  // http://yoursite.com/upload/
$config['allowed_types'] = 'jpg|jpeg|gif|png';
$config['max_size']      = 1024*2; //2MB

Loading upload library and intialize config:-

$this->load->library('upload');
$this->upload->initialize($config);

Below i am sharing an example of how to upload files in codeigniter with image preview. adding some extra stuff using javascript to preview files or images. and for validation and uploading files i am using callback function. after callback success uploading files in root/upload directory. you need to add your db query code for more stuff.

Upload files in codeigniter

1. Create a view file under application/views/upload.php and add below code :-

<html>
<head>
<title>Upload Form</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function readURL(input,id) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#'+id).attr('src', e.target.result).width(50).height(50);
    };
    reader.readAsDataURL(input.files[0]);
  }
}
</script>
</head>
<body>
<?php echo form_open_multipart('uploads');?>
<div class="form-group">
    <label>Select image</label>
     <div data-provides="fileupload" class="fileupload fileupload-new">
      <div style="width: 67px; height: 50px;" class="fileupload-new img-thumbnail">
        <img id="userfile_preview" class="media-object img-thumbnail pull-left" src="<?php if(!empty($profile_image)){  echo base_url(); ?>uploads/profile/<?php echo $profile_image; } else {  echo base_url(); ?>img/no_img.png<?php } ?>" alt="" />
      </div>                 
      <span class="btn btn-default btn-file">
            <input name="userfile" id="userfile" type="file" onchange="readURL(this,'userfile_preview');" />
      </span>                
      <span class="required-server"><?php echo form_error('userfile'); ?> </span>
      </div>
  </div>
<br />
<br />
<input type="submit" value="upload" name="submit"/>
</form>
</body>
</html>

2. Create a controller file under application/controllers/uploads.php and add below code :-

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Uploads extends CI_Controller {
  public function index() {
    // setting up validation.
    $this->form_validation->set_rules('userfile', 'User File', 'required|callback_file_upload');
    if ($this->form_validation->run() == false){
      $this->load->view('upload');
    }
    else {
      // success block
      if(!empty($this->upload_data['profile_image'])){
        if(!empty($this->upload_data['profile_image']['file_name'])){
           // user this file name to insert db and do your stuff.
           echo $this->upload_data['profile_image']['orig_name'];
        }
      }    
    }
  }
  public function file_upload(){
    $this->load->library('upload');
    // required configuration.
    $config['upload_path']   = './upload/';
    $config['allowed_types'] = 'jpg|jpeg|gif|png';
    $config['max_size']      = 1024*2; //2MB
    $this->upload->initialize($config);
    if(!$this->upload->do_upload('userfile')){
      $this->form_validation->set_message('file_upload',str_replace(array('<p>', '</p>'),'', $this->upload->display_errors()));
      return false;
    }
    else {     
      $this->upload_data['userfile'] = $this->upload->data(); 
      return true;
    }    
  }
}

So now you can see on uploading image a preview and find your uploaded files in root/upload directory.