I must admit that more often than not when I run across an option to upload files the interface leaves a lot to be desired. Why is this? Should end users not be presented with eye candy as well as immediate feedback when it comes to uploading data?
Thanks to JQuery and JQuery UI you can now provide snazzy interfaces for your file upload mechanism with very little effort. Thanks to Benj and Ronnie for Uploadify which a slick JQuery plug-in a great deal of the work has been accomplished and all that remains is the implementation. While my example does not use the latest release of this plug-in you should be able to adapt any required changes fairly easy. If you recall earlier I mentioned JQuey UI, jump over there and build a custom download that fits into your user interface. Right now there are 24 themes or you can create your very own should you feel the need to do so.
Once you completed this step it is now time to wire up the HREF tag that will open a snazzy dialog. For example:
Note: The file Upload Manager only appears when the Open File Upload Dialog is clicked.
Here is where the beauty of Uploadify comes in. As the end user selects files they are displayed as such:
From here the end user can perform the following actions:
- Start upload
- Clear selected uploads
- Clear single upload
- Close the dialog
It is import to note the configuration for Uploadify, be sure to review the documentation. Here is an example:
Download Example (Note: The solution was created in VS.NET 2010 Beta 2)
Another useful benefit of the use of JQuery UI is the File Upload Manage Dialog can be both re-sized and dragged within the browser. I hope that you find this example useful and I would be interested in what other products you have used when it comes to file uploads, just leave a comment stating what you have found works best in your situation.