Adventures In Development » Flash http://www.adventuresindevelopment.com Web Development Tools, Ideas, Techniques and Resources Fri, 27 Aug 2010 04:11:04 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Make an AJAX-like Multiple File Uploader with Uploadify http://www.adventuresindevelopment.com/2009/05/20/make-an-ajax-like-multiple-file-uploader-with-uploadify/ http://www.adventuresindevelopment.com/2009/05/20/make-an-ajax-like-multiple-file-uploader-with-uploadify/#comments Wed, 20 May 2009 18:40:41 +0000 Matthew Paulson http://www.adventuresindevelopment.com/?p=68 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
]]> http://www.adventuresindevelopment.com/2009/05/20/make-an-ajax-like-multiple-file-uploader-with-uploadify/feed/ 10