The component I found that worked the best was Uploadify. Like nearly every one of the file upload components that provides a progress bar, Uploadify was made by default to work with PHP. However, the 'script' parameter to the uploadify function accepts a Controller method just as easily. It was very easy to hook up. Besides providing a progress bar, it also allowed for multiple files to be uploaded through a single upload control. To use this component, just add the reference statements to the javascript, flash and other necessary files (check the Uploadify site and see the page source for their demo for a complete working code sample), and add a call to 'uploadify' for each input control you want to have upload progress and multiple uploads for. This is what the call to the uploadify method looked like in my app:
$('#UploadControlID').uploadify({
'uploader': '../../Content/uploadify.swf',
'script': '/File/Upload/<%= Model.Asset.ID %>',
'cancelImg': '../../Content/cancel.png',
'fileDataName': 'UploadComponentID',
'multi': 'true',
'fileExt': '*.pdf; *.jpg; *.gif; *.png; *.xml;',
'fileDesc': 'Select files of type .pdf, .jpg, .gif, .png, or .xml',
onComplete: function()
{
$.get("/File/Index/<%= Model.Asset.ID %>", function(data)
{
$("#FileDetails").html(data);
});
}
});
Notice that, in the 'script' parameter, I've included a bit of ASP.NET code right in with the path to the Controller method. This is due to the fact that starting the upload through this component DOES NOT fire off a form 'submit'. You can still access the uploaded files in your Controller logic from the Request.Files colllection, but form variables are not available. I needed the primary key of the asset this file was being uploaded for, and so was keeping that value in a hidden variable on the form. Since I couldn't use that approach with Uploadify, I simply grabbed it from the Model and rolled on.
The last thing you need is a link that causes the Uploadify component to start the uploads(unless you've set it to start immediately, which I really don't like). On their website, they've demo'd the control that kicks this off as an anchor tag with some inline pseudo javascript, which I find clunky. Their version looks like this:
<a href="javascript:$('#UploadControlID).uploadifyUpload();">Upload Files</a>
I decided to do it a bit differently, and here is my solution:
// This is the code that will start the upload. Place it in your jQuery
// document.ready function:
$('#UploadButton').click(function()
{
$('#UploadControlID).uploadifyUpload();
});
// Your upload control and the button to fire it off:
<input type="file" id="UploadControlID" name="UploadControlID" size="50" />
<input type="button" value="UploadFiles" id="UploadButton" />
This removed the inline javascript and adhered more closely to 'best practices', and just looked a bit better to me. Both work just fine.
It's not how hard you push in life, but who you push, that makes the difference between success and running for your life.