ASP .NET PageMethods - File Upload - asp.net

Question

I am trying to create an ajaxy file upload.
Here is the asp code:
<input type="file" id="supportingDocs" runat="server"/>
<input type="button" id="uploadBtn" onclick="upload();" value="Upload"/>
Here is the javascript:
function upload()
{
PageMethods.uploadFile($get('supportingDocs').value, onSucceed, onFail);
}
Here is the relevant C# code:
[WebMethod]
[ScriptMethod]
public static string uploadFile(string files) {
HttpRequest request = HttpContext.Current.Request
........
}
What I am trying to get is the HttpFilesCollection from the request which is empty. I know that PageMethods do not follow the normal asp .net lifecycle. However looking at the HttpRequest object while stepping through the code in debugging I see that everything else in the request is there but the "Files" property is empty. I'm probably missing something here and this method of uploading files might not even be possible.

Answer 1

You could always just use the one provided by the AjaxControlToolkit, i.e. ASyncFileUpload

Answer 2

You could consider the jquery plugin: http://www.uploadify.com/
The file upload control works by sending a post request back to the server with the file contents. That is how the file upload is built. with that said, I'm not sure how the inner workings of all these file upload plugins operate, but out of the box even with ASP.NET AJAX services, it may be better to consider some other service.
If you wanted to use a service, you could try the Sys.Net.WebServiceProxy.invoke method, which gives you control over the post, serialize the form data to post to the server. Again, that's in theory, I'm not 100% sure how this all works through AJAX.
HTH.

Answer 3

If you want to upload a file without a full postback, try SWFUpload. It has a very nice file browser option and other features, unlike ASP.NET AJAX AsyncFileUpload which looks very limited.
SWFUpload demo: http://demo.swfupload.org
A popular jquery option is uploadify, see this stackoverflow post.
I never was able to get asynchronous file upload working without flash.
Update
This post claims that AsyncFileUpload doesn't use flash, so that may be an advantage over uploadify and SWFUpload.

Answer 4

Ok so I ended up using both the asp async upload and page methods.
The AsyncFileUpload worked well for actually saving the file on the server but I still needed to run some server-side code to write out the DB and also list the current files uploaded to the server. Unfortunately anything you change client-side will not get rendered since there is no post-back after the upload. So I just set the OnClientUploadComplete to a JS function that uses a page method.
ASP Code:
<asp:AsyncFileUpload ID="asyncFileUpload" runat="server" OnUploadedComplete="uploadFile" OnClientUploadComplete="showUploadedFiles" ThrobberID="uploading"/>
Javascript:
function showUploadedFiles()
{
PageMethods.getUploadedFiles(onSucceed, onFail);
}
function deleteDoc(docId)
{
PageMethods.deleteDocument(docId, onSucceed, onFail);
}
function onSucceed(result, userContext, methodName)
{
$get('uploadedFiles').innerHTML = result;
}
function onFail(error, userContext, methodName)
{
$get('uploadedFiles').innerHTML = "<p style='color: red;'>AJAX Error!</p>";
}