Ajax Loading Animation Loading...

Integrate jQuery File Upload with CodeIgniter

by Mr-H On 2012/05/14 - 08:22

File Upload widget with multiple file selection, drag & drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing.

Hello guys, how are you doing Laughing

First of all i'm sorry for being too late to add a post in my blog, i'm too busy those days.

any way, in today i want to share with you a wonderful jquery plugin, which allow you to upload multiple file to your server with a progress bar that tells you the progress of your uploads.

this plugin has many option which allow you to customise it to fit your need you can read the full documentation here.

and as usual i integrate this plugin with the codeigniter framework. 

How to install

the integration is too easy, all you need to do is to rename the 'upload.class.php' to 'upload.class_helper.php' and put it to the helper directory.

in the controller create a methode to handle the upload and put this code :

public function upload()
        error_reporting(E_ALL | E_STRICT);


        $upload_handler = new UploadHandler();

        header('Pragma: no-cache');
        header('Cache-Control: no-store, no-cache, must-revalidate');
        header('Content-Disposition: inline; filename="files.json"');
        header('X-Content-Type-Options: nosniff');
        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: OPTIONS, HEAD, GET, POST, PUT, DELETE');
        header('Access-Control-Allow-Headers: X-File-Name, X-File-Type, X-File-Size');

        switch ($_SERVER['REQUEST_METHOD']) {
            case 'OPTIONS':
            case 'HEAD':
            case 'GET':
            case 'POST':
                if (isset($_REQUEST['_method']) && $_REQUEST['_method'] === 'DELETE') {
                } else {
            case 'DELETE':
                header('HTTP/1.1 405 Method Not Allowed');


that's it pretty simple to use.

download the full source code here if you want to see a real demonstration, or see it directly here.


Web hosting


Tor Castensson
posted on 14 June 2012

Hi Thanks for this. When trying this I get the error " SyntaxError: Unexpected token <". Don't know where to start to look for the extra "<"... Do you know how to insert a record with CI active records for each file uploaded? Thanks!

Jonathan Gravoi
posted on 19 June 2012

I also get the SyntaxError: Unexpected token <

Samira Yousefi
posted on 31 July 2012

I am getting this following error message Error SyntaxError: JSON.parse: unexpected character please help me

posted on 16 October 2012

It's work.. change permission in directory files and thumbnails.. :) Thx alot guys..

Rai Ehtisham
posted on 25 October 2012

The delete functionality is not working on localhost, anyone with a clue?

posted on 27 October 2012

it works properly when the url of my browser is "localhost/FolderName", but when i changed the url into "localhost/FolderName/index.php/Controllers/index", the uploader doesnt work. Check this out. https://picasaweb.google.com/103745353485420935476/FileUploaderJqueryCodeIgniter any suggestion?

posted on 28 October 2012

after uploaded the image, i tried to delete all images and all images was deleted. but when i refresh the page, all images just came out again. any suggest? ;)

posted on 11 November 2012

The delete function don't work. The files (images and thumbnails) are not deleted from server. The question affects the script when run in codeigniter, because the script not in CI works fine. Any suggest? Thanks a lot!!

posted on 20 November 2012

Hi, thank you very much for this. It's working really well, but it doesn't seem to work with Internet Explorer. When I try to upload an image I get the error 'SyntaxError: Invalid character'. I found a possible fix here: http://whywontitjustwork.wordpress.com/2012/09/07/getting-jquery-file-upload-to-play-nicely-with-rails-3-x-and-internet-explorer/ But it seems that this fix only works for Rails and not for Codeigniter or atleast I cannot get it to work. I hope you can help me

posted on 22 November 2012

The delete button does not delete the image after refreshing all the image come again, what is the reason can any one fix this problem..!

posted on 29 November 2012

For those who are having problems with uploading images which gives an error of "SyntaxError: Unexpected token <..." On the root folder, just add the folders "files" and "thumbnails". I haven't found the solution yet for the deletion of files not being deleted. =/ Hope that helps!

posted on 02 December 2012

The problem with the DELETE is easily solved: In upload.class_helper.php, change the set_file_delete_url function to point to the correct controller/method, instead of to the root directory. $file->delete_url = $this->options['script_url'] .'home/upload?file='.rawurlencode($file->name);

posted on 06 December 2012

Hey there, I am getting this "Error SyntaxError: Unexpected token <" error after upload seems to be finished. I used the same file structure as in the tutorial. I have set the permission of "files" folder to 777. But no luck. What do you think what would be the reason for that. BTW, I am using the latest CI. Thanks in advance.

im man
posted on 07 February 2013

everything good i have some problem i can't find which way i can insert db with ci active record with image path name thank.

posted on 16 February 2013

Hey guys, how can we pass options in the controller, like putting the path to upload , or filetypes ? i've found that i cna change it in the JS file , but ... if you want it to be dynamical ?

posted on 28 February 2013

Hi, It is good .But When i was run this example in i got below error SyntaxError: Invalid character Please tell me how i will slove it

posted on 01 March 2013

Delete Functionality is not work When i was click on delete button file is not deleted from folder Please Help me

posted on 16 March 2013

When I try to upload i get this error " Error Empty file upload result" could anyone help me how to fix this?

posted on 16 March 2013

When I try to upload a file, i get this error "Error Empty file upload result" please help me fix this.. thanks

Leave a comment :

Friends Link

Recent updates

© copyright Vortex Developement