Blueimp is a file upload widget which can be used for multiple file uploads with validations and is highly secured. It also supports cross domain, chunked and resumable file uploads. It can be used for image, audio, video etc., It has a progress bar shown for each image and supports drag and drop. It works with any server side platform such as Google App Engine, PHP, Python, Ruby on Rails, Java etc., However in this tutorial we are going to discuss about PHP and Codeigniter.

As we already discussed that Blueimp supports PHP, so we can use with Codeigniter too. Blueimp wiki says that you can easily integrate this script with Codeigniter but when I tried to work with it I found it very hard to do. I made it simpler and will share it with you.

Open constants.php file in config folder and add the below given code in it. You can add it at the bottom of the code in constants.php

// Define Ajax Request
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');

Now create a new php file using any text editor and add the following code to it.

<?php

if (!defined('BASEPATH'))
    exit('No direct script access allowed');

class Upload extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper(array('form', 'url', 'file'));
    }}

 public function do_upload() {
        $upload_path_url = base_url() . 'files/';
//you should create a folder uploads in the root directory of your codeigniter
        $config['upload_path'] = FCPATH . 'files/';
  //to allow only image files of below type
        $config['allowed_types'] = 'jpg|jpeg|png|gif';
  //max size to upload else return error message. change it to more if you want to allow large files
        $config['max_size'] = '50000';

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

        if (!$this->upload->do_upload()) {
           

            //Load the list of existing files in the upload directory
            $existingFiles = get_dir_file_info($config['upload_path']);
            $foundFiles = array();
            $f=0;
            foreach ($existingFiles as $fileName => $info) {
              if($fileName!='thumbnails'){//Skip over thumbnails directory
                //set the data for the json array   
                $foundFiles[$f]['name'] = $fileName;
                $foundFiles[$f]['size'] = $info['size'];
                $foundFiles[$f]['url'] = $upload_path_url . $fileName;
                $foundFiles[$f]['thumbnailUrl'] = $upload_path_url . 'thumbnails/' . $fileName;
                $foundFiles[$f]['deleteUrl'] = base_url() . 'upload/deleteImage/' . $fileName;
                $foundFiles[$f]['deleteType'] = 'DELETE';
                $foundFiles[$f]['error'] = null;

                $f++;
              }
            }
            $this->output
            ->set_content_type('application/json')
            ->set_output(json_encode(array('files' => $foundFiles)));
        } else {
            $data = $this->upload->data();
            
            // to re-size for thumbnail images un-comment and set path here and in json array
            $config = array();
            $config['image_library'] = 'gd2';
            $config['source_image'] = $data['full_path'];
            $config['create_thumb'] = TRUE;
            $config['new_image'] = $data['file_path'] . 'thumbnails/';
            $config['maintain_ratio'] = TRUE;
            $config['thumb_marker'] = '';
            $config['width'] = 300;
            $config['height'] = 100;
            $this->load->library('image_lib', $config);
            $this->image_lib->resize();


            //set the data for the json array
            $info = new StdClass;
            $info->name = $data['file_name'];
            $info->size = $data['file_size'] * 1024;
            $info->type = $data['file_type'];
            $info->url = $upload_path_url . $data['file_name'];
            // I set this to original file since I did not create thumbnails.  change to thumbnail directory if you do = $upload_path_url .'/thumbnails' .$data['file_name']
            $info->thumbnailUrl = $upload_path_url . 'thumbnails/' . $data['file_name'];
            $info->deleteUrl = base_url() . 'upload/deleteImage/' . $data['file_name'];
            $info->deleteType = 'DELETE';
            $info->error = null;

            $files[] = $info;
            //this is why we put this in the constants to pass only json data
            if (IS_AJAX) {
                echo json_encode(array("files" => $files));
                //this has to be the only data returned or you will get an error.
                //if you don't give this a json array it will give you a Empty file upload result error
                //it you set this without the if(IS_AJAX)...else... you get ERROR:TRUE (my experience anyway)
                // so that this will still work if javascript is not enabled
            } else {
                $file_data['upload_data'] = $this->upload->data();
                $this->load->view('upload/upload_success', $file_data);
            }
        }
    }

 public function deleteImage($file) {//gets the job done but you might want to add error checking and security
        $success = unlink(FCPATH . 'files/' . $file);
        $success = unlink(FCPATH . 'files/thumbnails/' . $file);
        //info to see if it is doing what it is supposed to
    $info = new StdClass;
        $info->sucess = $success;
        $info->path = base_url() . 'files/' . $file;
        $info->file = is_file(FCPATH . 'files/' . $file);

        if (IS_AJAX) {
            //I don't think it matters if this is set but good for error checking in the console/firebug
            echo json_encode(array($info));
        }
    }