How to File Upload in Codeigniter

File uploads are an essential process in many web apps. Almost every website and web app requires an integrated file upload component. In this tutotial i will use File Uploading class, we can upload files and we can also, restrict the type and size of the file to be uploaded. You may also like Multiple file upload in Codeigniter and Multiple file upload in php.

Steps For How to File Upload in Codeigniter

Step 1. Create View File

Copy the following code and store it at application/view/form.php.

      <title>Upload Form</title> 
      <?php echo $error;?> 
      <?php echo form_open_multipart('upload/do_upload');?> 
         <input type = "file" name = "userfile" size = "20" /> 
         <input type = "submit" value = "upload" /> 

Step 2. Create Controller File

Copy the code given below and store it at application/controllers/Upload.php. Create “uploads” folder at the root of CodeIgniter i.e. at the parent directory of application folder.

defined('BASEPATH') OR exit('No direct script access allowed');
class Upload extends CI_Controller {
    function __construct()
        $this->load->helper(array('form', 'url')); 
    public function index() { 
        $this->load->view('form', array('error' => ' ' )); 
    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')) 
            $data = array('upload_data' => $this->upload->data()); 
            echo "File successfully uploaded";
            echo "<br /><pre>";
            $error = array('error' => $this->upload->display_errors()); 
            $this->load->view('form', $error); 

Step 3. Successfully Uploading File Output

After successfully uploading a file, you will see the following output.

File successfully uploaded

    [upload_data] => Array
            [file_name] => BANK.png
            [file_type] => image/png
            [file_path] => E:/wamp/www/school/uploads/
            [full_path] => E:/wamp/www/school/uploads/BANK.png
            [raw_name] => BANK
            [orig_name] => BANK.png
            [client_name] => BANK.png
            [file_ext] => .png
            [file_size] => 45.24
            [is_image] => 1
            [image_width] => 639
            [image_height] => 493
            [image_type] => png
            [image_size_str] => width="639" height="493"


And if you like this tutorials please share it with your friends via Email or Social Media.

Leave a Reply

Your email address will not be published. Required fields are marked *