Matt Paulson

Entrepreneur, Author, Private Equity Investor
  • Facebook
  • Linkedin
  • Twitter
  • Rss
  • Blog
    • Book Recommendations
    • Church Life & Ministry
    • Community Projects
    • Entrepreneurship
    • Quaterly Updates
    • Startup Community
    • Startup Q&A Show
    • Web Development
  • About
    • Resume
  • My Companies
    • Angel Investments
  • My Books
    • Online Business from Scratch
    • Automatic Income
    • The Ten-Year Turnaround
    • Email Marketing Demystified
    • 40 Rules for Internet Business Success
  • Media Appearances
  • Contact
Home» Web Development » Make an AJAX-like Multiple File Uploader with Uploadify

Make an AJAX-like Multiple File Uploader with Uploadify

Posted on May 20, 2009 by matt in Web Development 10 Comments
Tweet

I’m currently working on an file manager that will be integrated with the content management system software that we developed. In doing this, I’ve been looking for a solution that would allow users to upload multiple files at once, does so in a very easy to use way and shows a progress bar. For this project, I don’t really need to interact with ASP.NET at all for a database, so I can look at some of the JavaScript & Flash solutions that are out there. The solution that I eventually settled on was Uploadify. The tool is actually a combination of Flash and JQuery. It’s very customizable in the functionality that it offers as well as the design of the system.

I was at first concerned because the solution only supports PHP, however members of the Uploadify development community have developed a replacement server-sidescript that will replace the “upload.php” file with a .NET version. You can find that code on their forums here.

Here’s what Uploadify looks like in action:

uploadify-example

Implementing Uploadify

Getting Started:

So how do we implement Uploadify? It’s actually easier than many JQuery modules that are out there. The first thing you’ll need is the Uploadify Core that can be downloaded from the Uploadify website. You can also download code for several examples of implementations of code. The core it self comes with a PDF manual as well.

Script References:

You’ll need to reference the latest version of the JQuery Core was well as the Uploadify JavaScript file:

<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>

Making a Placeholder:

You’ll need a placeholder DIV that the script can use to draw the upload tool on the page somewhere in the <BODY> tag:

<div id="fileUpload1"></div>

Calling the Script:

Now, all we need to do is call the uploader when the page loads:

<script type="text/javascript">
$(document).ready(function() {
 $("#fileUpload1").fileUpload({
  'uploader': 'uploadify/uploader.swf',
  'cancelImg': 'uploadify/cancel.png',
  'script': 'uploadify/upload.php',
  'folder': 'files',
  'multi': true,
  'buttonText': 'Select Files',
  'checkScript': 'uploadify/check.php',
  'displayData': 'speed',
  'simUploadLimit': 2
 });
});
</script>

That’s all it really takes to implement Uploadify. You might want to modify some of the settings in it to customize the uploader to your needs, but it’s a really great solution.

Here are some common options that you can play with in the settings:

  • “CheckScript” and “Script”  -> Be sure to change these if you are using the .NET solution
  • sizeLimit -> Limit the file size of the upload (in bytes)
  • Height & Width -> Change the dimensions of the container DIV
  • fileExt -> Limit the type of file extensions that you allow.
  • ButtonText & ButtonIMG -> Customize the look of the upload button
  • There’s a full list in the Uploadify Website
Tweet

Comments

10 comments on “Make an AJAX-like Multiple File Uploader with Uploadify”

  1. Arif says:
    July 15, 2009 at 12:11 pm

    Can you please help me with processing multiple uploaded files inside the backend script (upload.php)?

    I'm able to do single upload and process the file, but cannot figuring the multiple files processing.

    I've tried with reading the files from $_FILES array, but no luck.

    Reply
  2. Sean says:
    August 31, 2009 at 11:46 am

    I receive the error "$ is not defined" for the "$(document).ready(function() {" line in Firefox.

    Reply
  3. bob says:
    September 29, 2009 at 3:01 pm

    Have you actually tried to RUN the asp version?

    Perhaps a run down of how you made that work?

    Otherwise this page is useless. Users can just go to uplodify website and waste time reading there.

    Reply
  4. syn4k says:
    February 3, 2010 at 4:19 pm

    $ is not defined in firefox

    Reply
  5. syn4k says:
    February 3, 2010 at 4:20 pm

    and in all other browsers…

    Reply
  6. syn4k says:
    April 1, 2010 at 11:19 pm

    I figured out the $ is not defined error…
    This was happening to me because I was using two javascript frameworks at the same time. e.g. jquery and mootools. There are some solutions to using two frameworks at once but I ended up just using jquery and removing mootools. This solved my problem.

    Reply
  7. Scott says:
    June 18, 2010 at 9:13 am

    Mathew,

    To get this to work in joomla, what file did you place the "Script References" that you listed above in?

    Do you have to modify joomla's index.php? or the just your default templates' index.php with the script references?

    also, is the uploadify directory hosted in your root dir within joomla core?

    Can you then put the placeholder div code () into an article and then link to that article through a menu item for this to work, as long as you dont have an editor strip it?

    Just trying to get an exact method of step by step modifications made to get this working in joomla. Someone needs to make it into an extension already. 😉

    Thanks for your help.

    Scott

    Reply
    • Matthew Paulson says:
      June 21, 2010 at 7:18 am

      I'd guess that you'd want to place the script references in the template file's header. I would guess that you could put the other code inside of an article.

      Reply
  8. Scott says:
    June 23, 2010 at 1:42 pm

    Still can't get this to work in Joomla. =(

    Please advise in more of a step by step approach.

    Step 1) Upload and unarchive the uploadify package to /uploadify (within joomla core).

    Step 2) Go to template manager in Joomla Admin panel and select the default template you wish to modify..

    Click "Edit HTML"

    Add this exact line of code in your between your tags:

    Add this exact line of code somewhere in your tag:

    Click Save

    Step 3) Create a new article

    Insert exact code:

    $(document).ready(function() {
    $("#fileUpload1").fileUpload({
    'uploader': 'uploadify/uploader.swf',
    'cancelImg': 'uploadify/cancel.png',
    'script': 'uploadify/upload.php',
    'folder': 'files',
    'multi': true,
    'buttonText': 'Select Files',
    'checkScript': 'uploadify/check.php',
    'displayData': 'speed',
    'simUploadLimit': 2
    });
    });

    Click Save.

    Step 4) Go to menu manager and create a new "Article Layout" menu item on your mainmenu titled "Upload Files" and direct it to the article that you created in Step 3)

    *** This above described method isn't working currently and I am posting this just to show how I tried to implement the Uploadify script and failed, looking to find the correct approach so if you have this working in Joomla, please explain your approach in this manner.

    Thanks for your help.

    Reply
  9. Brat says:
    July 14, 2010 at 4:26 pm

    For everyone who is trying to get jQuery to work in Joomla, did you either disable Mootools or run jQuery in "no Conflict" mode?

    Basically, conflicts are caused by both Mootools and jQuery sharing the $ namespace. Mootools is notorious for not being a "good neighbor" and the result is a clash. jQuery however has a "no conflict" mode which allows it to work with other frameworks.

    I'm about to launch a site where I use jQuery extensively in the frontend, and it has been a bit of headache since Joomla developers (for reasons I cannot understand) force Mootools on you in the frontend. In the end, I installed a special free plugin (which actually handles jQuery and "no conflict"). So far, so good.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Enter your email address below to receive a steady stream of tricks, tips and ideas to help you build a better and more profitable business.

Email Marketing Demystified

The second edition of Email Marketing Demystified is now available. This book teaches you how to build a massive email list, write marketing copy that converts and generate more sales in your business.

Click Here to Get Your Copy of Email Marketing Demystified

Recent Posts

  • Introducing MarketBrew, a Craft Beer from MarketBeat and Remedy Brewing Company

    April 22, 2021
  • How to Find and Pitch Investors for Your Startup

    April 13, 2021
  • My Quarterly Update: Q2 2021

    April 6, 2021
  • The Future of Seed-Stage Startup Capital in the Dakota’s

    March 31, 2021
  • Next Steps for Sioux Falls’ Startup Ecosystem

    March 16, 2021

    Follow me on Facebook & YouTube

    Contact

    • [email protected]
    • Contact Us
    • matthew-paulson
      • Facebook
      • Twitter
      • Linkedin
      • Instagram
      • Rss

    © Matthew Paulson 2003-2021. All Rights Reserved.

    Privacy Policy