no

How to Make Uploadify Work on Codeigniter

Recently, I have a requirement to implement a multiple file upload in one of my project. During upload I also need to pass a variable which ...

Recently, I have a requirement to implement a multiple file upload in one of my project. During upload I also need to pass a variable which will classify the category of the uploaded files. The category is a dropdown control.

What we need:
1.) codeigniter
http://codeigniter.com/downloads/ (I'm using 1.7.2)
2.) uploadify - http://www.uploadify.com/download/
make sure you get the latest version, v2.1.4
3.) jquery (1.4.2 - just google it)

Steps:
1.) I assume you know how to setup codeigniter
2.) In my case I put all the js and css file like this:
+codeigniter_base_dir
+scripts
+jquery.uploadify.v2.1.4
+swfobject.js
+jquery-1.4.2
+css
+uploadify.css
+uplodify
+uploadify.swf
+uploadify.php
+images
+cancel.png

My HTML File:
<select name='category' id='category'>
<option value='ALL'>ALL</option>
<option value='2'>Category 1</option>
<option value='3'>Category 2</option>
<option value='4'>Category 3</option>
<option value='6'>Category 4</option>
</select>

<div id="custom-queue" style='width: 275px;'></div>
<input id="custom_file_upload" type="file" name="Filedata" />
<a href="javascript:$('#custom_file_upload').uploadifyUpload()"><img src="<?=base_url()?>images/upload.png" alt="Upload" border="0" /></a>


Javascript File
$(document).ready(function() { //on document ready event
//take note that uploader, script and cancelImg paths can be absolute
$('#custom_file_upload').uploadify({
'uploader'       : "uploadify/uploadify.swf",
'script'         : "uploadify/uploadify.php",
'cancelImg'      : "images/cancel.png",
'folder'         : "", //it's null because I've override the uploadify.php
'pagePath'      : "",
'multi'          : true,
'auto'           : false,
'fileExt'        : '*.jpg;*.jpeg;*.gif;*.png;',
'fileDesc'       : 'Allowed Files (.JPG, .JPEG, .GIF, .PNG)',
'queueID'        : 'custom-queue',
'queueSizeLimit' : 5,
'displayData'    : 'percentage',
'scriptData'     : {'category': $('#adcategory').val()}, //set the initial value of the script data
'onSelectOnce'   : function(event,data) {
$('#status-message').text(data.filesSelected + ' files have been added to the queue.');
},
'onAllComplete'  : function(event,data) {
$('#status-message').text(data.filesUploaded + ' files uploaded, ' + data.errors + ' errors.');
}
});
//since we want to update the category on category dropdown change, we need this event
$('#category').bind('change', function() {
$('#custom_file_upload').uploadifySettings('scriptData',{'category': $('#category').val()});
});
}


Here's my override uploadify.php
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
//get codeigniter's root directory in the form
//windows: c:\etc\etc
//linux: home/etc/etc/etc
$root = getcwd(); 
$targetFile = $root . "YOUR_ABSOLUTE_PATH" . $_FILES['Filedata']['name'];

$filename = $_FILES['Filedata']['name'];
$y_category = $_POST['category']; //get the category that we've set
//do what ever you want with the category and you can perform some sql here

move_uploaded_file($tempFile,$targetFile);
echo str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile); 
}
?>

Related

web 5416599043276965384

Post a Comment Default Comments

8 comments

M said...

Can you please share the sample files for download?

czetsuya said...

Hi M, I believe all the code you would need to run is on this post. You just need to copy them in your project.

I'll try to create a simple example if I have the time.

dhian said...

Hi czetsuya,
I try your tutorial but didn't work.
The error is script upload file not found.
I'm sure that uploadify.php on right directory.
I use code igniter 1.7.3 .
Help me please..

Anonymous said...

Hi dhian,

The script path should be relative to where the swf file is located.

Example: uploadify.swf is in root folder, and your script path is uploadify/uploadify.php. It should be like this

+root
++uploadify.swf
++uploadify
++++uploadify.php

czetsuya

M said...

Hi czetsuya

I tried your tutorial.
I'm getting no errors, but the file will not upload to the server.
How can I check if 'uploadify.php' is called and the correct parameters are passed?

Thank you for your help.

M said...

Hi czetsuya

now it's working.
The problem was the "$targetFile" path.
I was abel to debug with the following code. Maybe this is usefull for some people.

'onComplete' : function uploadifyComplete(evt, queueid, obj, response, data){
//
console.log(response);

// parse response to JSON
response = jQuery.parseJSON(response);

console.log(reponse);
},
onAllComplete : function uploadifyAllComplete(evt, queueid, obj, response, data){

//
console.log(response);

// parse response to JSON
response = jQuery.parseJSON(response);

console.log(reponse);

},
'onError' : function(evt, queueid, fobj, eobj){
console.log(evt);
console.log(queueid);
console.log(fobj);
console.log(eobj);
},

Anonymous said...

Hi M,

Glad you were able to solve your problem.

That's the problem with uploadify the targetFile for convenience should be relative to your uploadify.php file, which is not always the case. What if you are using routing like in my case with codeigniter :-D.

That's why it's much easier to customize path base on the getcwd() command, which I did.

Regards,
czetsuya

uno said...

article that you created is very interesting, by reading this article I have a reference to write a new post on my blog

item