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.

10 thoughts on “jQuery file upload: Uploadify”

  1. yeah really nice..

    I was using swfupload but the lack of jquery integration make quite bulky client side code.

    Im going to use it I think

  2. Mauricio, I first tried that one, but couldn’t integrate it well. Documentation was scarce and it was buggy. Uploadify on the other hand has a pretty good documentation.

    Lawrence, do try it, it’s very light, clean and easily customizable.

  3. Really nice of you to go that extra mile to ensure that your clients experience administering their site be as smooth as possible!

    That Uploadify plugin is a great find too!
    Thanks for sharing it.

    Note: just thought you should know, but your blog took 10+ seconds to download and I’m on a exclusive 10 Mbps link.

    Rock on!

  4. thanks for sharing these wrong information. I spent about one hour to fix your — work, try writing a working code next time —

  5. The code above is not wrong, it’s just a trimmed down version. Integrating a file uploader in Hybrid takes more than this simple snippet and involves editing several Hybrid admin files. If you only had told me your email or your name and politely asked me to guide you through all the files involved, I would have done so. Actually, I’ve posted another tutorial showing how to add an option to Hybrid’s theme settings page which is very useful to integrate Uploadify.

Leave a Reply to Avinash Cancel reply