Uploadify: The jQuery Plugin for Customizing File Upload Fields | 4 | WebReference

Uploadify: The jQuery Plugin for Customizing File Upload Fields | 4


[prev]

Uploadify: The jQuery Plugin for Customizing File Upload Fields [con't]

Test and Analyze Your Uploadify Code

Try uploading a moderately large file so that you can see the progress bar grow as the file is being uploaded. Neat, isn't it?

Now let us analyze the code. The includes don't need explanation. The HTML markup is very simple too. The only attribute that I will discuss is the ID. That's the hook that the Uploadify plugin uses.

The third part of the code, the JavaScript function, deserves some explanation. When the page loads, Uploadify looks for an element that has the ID file_upload and magically converts it to a beautiful-looking uploader with a few options that you can define.

Uploadify Options

Uploadify offers over 25 options that you can customize. We will look at the important ones here and for an exhaustive list of options, you can visit the uploadify homepage.

  • uploader (string): The path to the uploadify.swf file
  • script (string): The path to the backend script that will process the file uploads
  • cancelImg (string): The path to an image you would like to use as the cancel button
  • folder (string): The path to the folder where you want to save the files
  • auto (boolean): For automatically uploading files as they are added to the queue
  • fileExt (string): A list of file extensions that are allowed for upload
  • buttonText (string): The text that appears on the default button
  • buttonImg (string): The path to an image you would like to use as the browse button. Here are a couple of screenshots of the Uploadify plugin in use:


    Single File Upload


    Multiple File Upload

Conclusion

This Flash-based file uploader is rather lightweight and easy to implement. It allows you to customize the look of the button, decide which file types the user can upload, and displays a progress bar. The only feature missing is the ability to specify a list of file types that the user should not be able to upload. I can think of a few uses for that. That said, wouldn't it be wonderful if the HTML file uploader input field could support all this by default? We wouldn't need to use Flash for it then. Until that happens, we at least have Uploadify.