ASP.NET Ajax AsyncFileUpload: some thoughts

The latest release of the ASP.NET Ajax Control Toolkit (30930) now contains an AsyncFileUpload control.
The big advantage of this control is that you can upload files without a full page refresh (as in the original FileUpload control), showing the users direct feedback on the page.

I wanted to use the new control to let our users upload a CSV-file on an ASP.NET page.
If the file was in a correct format, it is read and stored in a list of objects, which will be bound to an ASP.NET GridView on screen.
The GridView control is included in an UpdatePanel to avoid a refresh of the whole page.

The AsyncFileUpload control has an UploadedCompleted event at server side where you can fetch the file contents.
So it looked quite simple to accomplish this behavior on my page:

ASP.NET mark-up:


Code-behind (VB.NET):

    Private Sub AsynCFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsynCFileUpload1.UploadedComplete
        If e.state = AjaxControlToolkit.AsyncFileUploadState.Success Then
            ' Do some parsing operations
            ' ...
            Me.grdMetingen.DataSource = resultList
            Me.grdMetingen.DataBind()          

        End If
    End Sub

Instead of loading the data in the ASP.NET gridview, nothing happened.
Allthough, when debugging, the event of the AsyncFileUpload is definitely hit.

So what went wrong then?
The AsyncFileUpload control internally uses an iframe to post its files to the server.
This means, nothing on the current page is post backed when uploading a file, but server side code is triggered anyway.
So what you need to do is a refresh of the UpdatePanel which contains the bound GridView with the resulting data in it.
Apart from a server side event, the component also has an uploadComplete event at client side.

I use the javascript function below to cause a postback of my update panel,
after that, my page works like expected.

function uploadComplete() {
      //Postback is necessary for asyncfileupload
      __doPostBack('idOfYourUpdatePanel', '');
}

So why hasn’t Microsoft’s ASP.NET team thought about this behavior?
It would have been really nice to have a property in which you can specify the id of an UpdatePanel to update when the upload process of the control has completed.

Secondly, I think the default appearance of the uploadcontrol really sucks!
Why didn’t they include some more styling options and why isn’t the text on that ugly button editable?

I hope we can consider this first version of the control as a basic version which will be much more improved on the next release of the Ajax Control Toolkit.
The AsyncFileUpload control definitely is a good idea, but it just isn’t mature enough.