Uplodify with Codeigniter

Uploadify is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. This time we

Uploadify is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. This time we will show you how to integrate it through Codeigniter framework.


Codeigniter is based on MVC arhitecture, so we gonna need to break our modified Uploadify plugin. The idea is to have special table pics in our database that contains pictureID (this is also the name of the picture in our upload folder – autoincrement), dataID (data we are connecting our pictures to), and isCover field. This could obviously be organized better, but it’s the simplest way for explaining it all.

Model

I’m gonna shorten this up a bit. As in MVC, here we will have our functions to update, delete, modify everything in DB. For example if we need all picIDs of our data:

public function getAllPics($id){
    $this->db->select('*')
            ->from('pics')
            ->where('dataID', $id);
    $query = $this->db->get();
    if ($query->num_rows() > 0)
        return $query->result();}

We should also have functions like setIsCover, checkIsCover etc.

Controller

This one is a bit more complex.
We will need upload function in Uploadify controller that will return success or failure.

public function upload($id){ //as in "dataID"
if (!empty($_FILES)) {  
    if(($_FILES["Filedata"]["size"] < 2000000)){
        $tempFile = $_FILES['Filedata']['tmp_name'];        
        $fileParts  = pathinfo($_FILES['Filedata']['name']);    
        if (strtolower($fileParts['extension']) == 'jpg' || 
            strtolower($fileParts['extension']) == 'jpeg'){
            /*here comes "modeling" magic - we will insert dataID to database, and get a new picID*/
            $this->uploadify_model->insertData($id);
            $ResArray = $this->uploadify_model->getLastPicID();
            $myPic = $ResArray->picID;
            $targetFile = str_replace('//','/','./'.$this->targetPath) . $myPic. '.jpg';
            move_uploaded_file($tempFile,$targetFile);
            echo "Success";}
        else{echo "Invalid Type";}}
    else{echo "Big file";}}
else{echo "Error";}

We also need our Load and Delete functions. Basically, the idea is to have the Load function (which takes dataID as parameter) to get all picIDs and return the html for displaying them (ajax will have a lot of use from this). And the Delete function (takes dataID and picID) will just delete row from DB and update new cover (model need to take care of this).

View

In our view we will have standard Uploadify stuff


Now for the jQuery part. To call the upload function

var id = $('#dataID').val(); //some hidden input
	$('#file_upload').uploadify({
	'buttonText' 	: $('#file_upload').attr('text'),
        'uploader'  	: base_url + 'uploadifyscript/uploadify.swf',
//so here is the way to call our controller, our function and to send our "dataID"
        'script'    	: base_url + 'uploadify/upload/' + id, 
        'cancelImg' 	: base_url + 'uploadifyscript/cancel.png',
        'onOpen'   	: function() { occupied = true;},
        'onAllComplete' : function() { occupied = false;},
        'onComplete'	: function() { loadImages();}, df df 
    });

And loading images part:

function loadImages(){
	var id = $('#dataID').val();
	var request = $.ajax({
//this is the part where we call our Load function from controller
		url: 	base_url + "uploadify/Load/" + id 
	});
//now just paste that html from Load function to our "images" div
	request.done(function(msg){$('#images').html(msg)}); 
	request.fail(function(jqXHR, textStatus) {alert( "Request failed: " + textStatus + "3" );});
}

If you understood the problematics, and know how to work yourself out of other small setup stuff for Uploadify, and you know how to handle the Codeigniter – at this point you already know what to do. If you still can’t get it all together, just leave comment, and we will try to help.
Thank you!

2 thoughts on “Uplodify with Codeigniter

  1. Hi

    i am new to codeigniter . Kindly mention about filenames to add above said code snippets.

    Thanks

Leave a Reply

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