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 ...
https://www.czetsuyatech.com/2010/11/web-uploadify-codeigniter.html
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:
My HTML File:
Javascript File
Here's my override uploadify.php
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 comments
Can you please share the sample files for download?
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.
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..
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
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.
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);
},
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
article that you created is very interesting, by reading this article I have a reference to write a new post on my blog
Post a Comment