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

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>";
    }