Cjax Framework

Project development is new to github. Give us a star.

Upload unlimited number of files, specific extensions allowed. Unique subfix/prefix to files names so that they will never overwrite other files already uploaded, customize it the way you want it. Works with just one line of code! everything else is optional. See Summary section for full details.

This plugin is straight forward, uploads files through ajax, with some good features. Allows for unique file names (so that if more than one person uploads a file with the same name, it won't conflict).

Brand new updates have been made in Cjax 5.9+ . This plugin now doesn't need a button to submit the files, just select the file and it gets uploaded.

Update Summary

Now you can not only preview the file that is uploaded, you can also view it on an overlay. Select a file, then it will preview automatically. Then, click the preview, and see!.

Envision this functionality (or a customized version of it) on your website or application?, and can't do it yourself? Not a problem. We'll do it for you.



//settings are optional
'suffix' => md5(time(). rand(1,10000000)), // makes files names universally unique,
'selector' => '.file'// css selector to know which fields to use. Make sure you add that class to the field.
'use_debug' => '|use_debug|'//sends the value of checkbox with that id, you can also say true or false
'ext' => array('jpg','gif''png','jpeg'), // extensions allowed
'no_files' => 'Please select a file',
'preview_container' => 'response',         // div where the thumbnails will appear.
'preview_dir' => 'http://cjax.sourceforge.net/uploads/'// directory url, where images are, if you want to show previews.
'overlay' => true// make previews clickable, to display bigger image

Try it

  • Enable Debug:   

Basic Usage

//settings are optional
'suffix' => md5(time(). rand(1,10000000)), // makes files names universally unique,
        //sends the value of checkbox with that id, you can also say true or false
'selector' => '.file2'// css selector to know which fields to use. Make sure you add that class to the field.
'ext' => array('jpg','gif''png','jpeg'),
//div where the thumbnails will appear.
'preview_container' => 'response',
'preview_dir' => 'http://cjax.sourceforge.net/uploads/',
'overlay' => true,

Try it



Plugin Usage

Defining Settings

This plugin takes a maximum of 3 parameters, the first two are required, the third one is optional - the third parameter is an array with options you may specify to costimize the uploader, all options are optinal.

URL Triggers

It has URL action triggers. For example, you can ask this plugin to execute an ajax call before the file(s) are uploaded. You can also make an ajax call after the files are uploaded, the uploading on itself is independent. The ajax call will contain the file names, and information about the uploads.

The convenience of such triggers is so that if you happen to want to add more things during these events, you can. They are optional. For lack of suggestions we'd say you want add additional checks, file names, file types, create directories, etc, etc, you can.


Uploader plugin takes the following parameters

Variable Required Type Options Description
$button_id Yes String May be a submit button, image or any element.
This option has been deprecated. Cjax 5.9 doesn't require it.
Button Id which you click on to upload the file(s). Button MUST be inside a form.
This option has been deprecated.
$upload_directory Yes String directory/uploads/ The uploads directory is where the files will be uploaded, it must have the proper permissions.
$options No Array

Possible Options

All options are optional.

  • after - [default empty] ajax controller URL - will post files names after the files are uploaded.
  • before - [default empty] ajax controller URL - will send an ajax request before the files are uploaded.
  • subfix - [default empty] string/variable at the beginning of the file name.
  • prefix - [default empty] string/variable at the end of the file name.
  • use_debug - display debug information after files are uploaded.
  • success_message [default empty] - message to display after files are uploaded.
  • ext - [default empty] list of file extensions allowed.
  • no_files - message to display if user tries to upload/submit without selecting any files
  • preview_container - [default empty] div id where the thumbnails will be shown. If not specified the preview feature will not be shown.
  • preview_dir - [default empty] full or relative URL where the new uploads are.
  • preview_type - [options single/multi] [default multi] show a single thumbnail by replacing any other one previous shown, or collect all uploaded thumbnails.
  • img_class - [default img] CSS class for the thumbnails
  • overlay - [true or false ] make thumbnails click-able, and display them in full overlay size.
  • overlay_img_class [default img_overlay] - CSS class for the overlay where the pop displays the image.
You may use these options to make the uploader work for you.

Additional Details About $options

The "before" url serves with the purpose of confirmation, lets say that you want to perform one or more operations right after the uploader has uploaded the files, (enter data to database, make new settings or files, you name it) or do more $ajax functions all this is possible because this callback is fired right after the files are uploaded and it posts the files names of the files that were successfully upload (it won't post the names of the files that might have failed). In the same way, the "before" setting can allow you to do additional tasks before the upload is performed. For instance if you wanted to create a new directory for each user that uploads files, you will want to do that before the files are uploaded!. The reason for all these settings is to allow you to fully operate with versatility and define and create your tasks within the scope of the uploader without modifying core files but instead just defining what you need and using your own controllers.

Example Code


= array(
'after' => 'ajax.php?upload_file/post'//submit request after files are uploaded
'suffix' => md5(time(). rand(1,10000000)), // makes files names universally unique
'debug' => true//Remove if you are not debugging.
'success_message' => 'File(s) @files successfully uploaded.',//@files tag is replaced by files uploaded.
'ext' => array('jpg','gif''png','jpeg'),
'no_files' => 'Please select a file.',
'preview_container' => 'placeholder',   // a div where you want the previews to appear
'preview_dir' => '../',   //enter a url, or relative dir, where they images are uploaded
'img_class' => 'img',  //optional - css class for thumbnails of the new uploads
'overlay' => true,  //optional - Image view when you click the thumbnails?
'overlay_img_class' => 'img_overlay' //optional - class overlay that displays the new image

//button id, upload directory


Professional Installation

Professional installation is available.

Previous Topic:  Previous Class    ·   Top of Page   ·   Demos Home   ·  

CodeIgniter  ·  Copyright © 2006 - 2012  ·  Cjax