Site icon StartFunction

jQuery file upload: Uploadify

Looking for a file uploading solution to integrate on a WordPress admin I stumbled upon the incredible jQuery file upload plugin Uploadify. It’s a complete solution and by all means easy to implement with a large amount of options.

I wanted to give my client the chance to upload some images directly on the settings page of the theme I’m coding for them. I could have used a solution like NextGen Gallery or WP Easy Uploader that appears to be quite interesting at file uploading and management but I didn’t wanted to bloat the theme up with a plugin for an option that would be seldomly use. The solution I needed had to use jQuery since WordPress Admin by default is jqueryfied.

Enter Uploadify. The best thing of Uploadify are its callbacks. I wanted to automatically populate some fields on the settings page for the theme so the onComplete callback felt just right. The following is a simplified version of the code used to implement it on a WordPress theme options page (it was implemented on a Hybrid child theme).

[html]
<link type="text/css" rel="stylesheet" href="<?php echo THEPATH; ?>uploadify.css"/>
?php%20echo%20THEPATH;%20?jquery-1.3.2.min.js
?php%20echo%20THEPATH;%20?jquery.uploadify.js
<script type="text/javascript">
$(document).ready(function() {
$(‘#browse’).fileUpload({
‘uploader’: ‘<?php echo THEPATH; ?>uploader.swf’,
‘script’: ‘<?php echo THEPATH; ?>upload.php’,
‘folder’: ‘<?php echo THEPATH; ?>uploads-folder’,
‘cancelImg’: ‘<?php echo THEPATH; ?>cancel.png’,
‘onComplete’: function(event, queueID, fileObj){
$(‘#input_id’).val(‘uploaded_files_path/’ + fileObj.name);
}
});
});
</script>
<a id="browse">Browse</a>
<input id="input_id" name="input_id" value="<?php //retrieve your option ?>" />
[/html]

Easy money, isn’t it? Uploadify supports multiple file uploading, automatic start, selective uploading, and a variety of useful callbacks. If you need a good solution for jQuery file uploading look no further.

Exit mobile version