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.

  • Ed Marquez

    Does your refresh cause the UploadComplete event to fire again?

  • No this is fired only once.

  • Spain Train

    I also run into the problem of UploadComplete being fired twice. I speculate this is due to UploadComplete being a registered event for both the UpdatePanel’s and the AsyncFileUpload’s postback, but can’t figure out how to prevent it….

  • Wendi

    Just an FYI… __doPostBack() (double underscore)

    I had only one underscore and kept receiving the following error: UnHandled Exception: Object expected. Hopefully this will help someone in the future.

    Sven…Thank you for the blog! It was extremely helpful!

  • Yes that’s right!
    You’re welcome!

  • Nelson

    Dear Sven:
    I’ve got a problem when using the solution you provided…

    First, I put both my AsyncFileUpload and GridView(inside a UpdatePanel) into a Formview

    EditTemplate.

    Second, in the AsyncFileUpload_UploadedComplete() function, I insert new data about the

    uploaded Information into database and then call the GridView.DataBind() method to update my

    GridView..

    Then use __doPostBack(‘idOfYourUpdatePanel’, ”); in the script function uploadComplete()

    ,but it doesn’t update the records in the GridView !

    Could you please provide some solution for me?…thanks !

  • You can’t call GridView.DataBind() in your UploadedComplete event, because no real postback took place.
    You have to rebind your grid after the postback of your update panel took place.
    Maybe you can check in your Page_Load event if your page is in postback and then refill your grid?

  • Nelson

    Dear Sven:
    It’s amazing…

    When I remove the GridView.DataBind() method and let it postback using __doPostBack(‘idOfYourUpdatePanel’, ”) in the script function, it really works…

    But I still have some problem when I click the delete button in the GridView (delete the item I’ve just upload,but it appear when upadtepanel refresh,I must click once the complete the deleting.But the first time deleting it really delete the DB record!), now I’m trying to solve it.

    Thanks a lot!

  • Mustafa

    Thank you for this useful topic..
    I have made every thing you have wrote..but i have on problem..
    When i refresh update panel by this code __doPostBack(‘UpdatePanel1’, ”);
    the file uploaded again..and every time i upload file and call __doPostBack(‘UpdatePanel1’, ”); the file uploaded again..Please tell me what is the wrong?

  • I think you have to put your AsyncFileUpload in a different updatepanel than the one that has to display the results of your upload.

  • flexitex

    I dont see the benefit here since we’re diong a postback so why use the asynch in first place?
    the problem still remains tho, kind of sucks ! again another microsoft flaw !

  • Yuv

    I am using a similar scenario with 2 update panels. But I am getting runtime script errors in Sys.UI.DomEvent.addHandler()

  • The AsyncFileUpload within edititem template won t trigger (at least in a devexpress grid so must be the same with a classic asp.net gridview), i added a AsyncFileUpload on a page and hide it (display:none) and it does trigger the one inside the grid so works now.

  • Rico

    Hello Sven, sorry to ask about this post. I got the exact same problem like Mustafa. The file is always uploaded again when I choose another file after the first one is uploaded successfully or on page refresh. I tried to have different update panels for the gridview and for the asynfileupload, but still it doesn’t work. Any other suggestion? thank you.

  • snowrain

    I spent so much time for investigations but still cant make an updatepanel refreshes once file is uploaded. Can somebody give me an example with updatepanel, asyncfileuploader & a label that shows time last file uploaded.
    p.s. i tried to call postback directly from js uploadComplete function, tried to place asyncfileuploader inside & outside updatepanel. i tried to change label text in Page_Load. nothing worked out

  • swip

    no me actualiza gridview inside updatepanel