Wednesday, January 25, 2017

Share It

Ajax jQuery File Upload with Codeigniter using BlueImp with image preview

Hello friends, are you looking for ajax based jquery file upload using codeiginter. Then here is tutorial for you. In this tutorial we will discuss about File Uploading using PHP Codeigniter and Jquery with ajax. Blueimp file upload gives you a best option for file uploading. I found this script very useful for my projects and I would like to share this information with you. Blueimp is a free open source code.

Why Blueimp?

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.


Blueimp with 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.

How to integrate Blueimp with Codeigniter?

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.


if (!defined('BASEPATH'))
    exit('No direct script access allowed');
class Upload extends CI_Controller {

    public function __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();
            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;

            ->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);

            //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));

Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on for web design solutions at low cost with effective SEO.