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?

Simply JavaScript – Free 150 Page Preview! Learn how easy it is to use JavaScript to solve real-world problems, build smarter forms, track user events (such as mouse clicks and key strokes), and design eye-catching animations. Then move on to more powerful techniques using the DOM and Ajax. World-renowned authors, Kevin Yank and Cameron Adams have used their exquisite skills and in-depth knowledge of JavaScript to deliver a book that teaches JavaScript with unprecedented clarity.

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.

Now it is time to begin putting the pieces of the puzzle together. Create an ASPX and bring in the appropriate JavaScript and CSS files.

<link type="text/css" href="CSS/uploadify.css" rel="Stylesheet" />
<link type="text/css" href="CSS/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.uploadify.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.7.2.custom.min.js"></script>

Once you completed this step it is now time to wire up the HREF tag that will open a snazzy dialog. For example:

<form id="form1" runat="server">
<p>
<a href="#" id="dialog_link"><span>
</span>Open File Upload Dialog</a></p>
<!-- file upload-dialog -->
<div id="fileManagerDialog" title="File Upload Manager">
<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadStart()">Start Upload</a>&amp;amp;amp;amp;nbsp;
|&amp;amp;amp;amp;nbsp;<a href="javascript:$('#<%=FileUpload1.ClientID%>').fileUploadClearQueue()">Clear</a>
<div style="padding: 40px">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</div>
</form>

You will notice that the HREF tag that opens the file dialog has an ID of “dialog_link” and a DIV tag has an ID of “fileManagerDialog”. The associated JavaScript with these two tags is:

<script type="text/javascript">
$(function () {
// Dialog
$('#fileManagerDialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});

// Dialog Link
$('#dialog_link').click(function () {
$('#fileManagerDialog').dialog('open');
return false;
});

//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
</script>

The above JavaScript performs the opening, closing and styling. The end result is:

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:

<script type="text/javascript">
$(window).load(
function () {
$("#<%=FileUpload1.ClientID%>").fileUpload({
'uploader': 'scripts/uploader.swf',
'cancelImg': 'images/cancel.png',
'buttonText': 'Browse Files',
'script': 'Upload.ashx',
'folder': 'uploads',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.png',
'multi': true,
'auto': false
});
}
);
</script>

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.