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

8 تعليقات

أحدث أقدم

Footer