Simple (?) AJAX Upload For ASP.NET

As I was working on an AJAX upload web part for SharePoint, I looked around to see if there was anything out there that would be suitable before I rolled my own after discovering that the ASP.NET UpdatePanel doesn’t play nicely with file inputs. Since I’m using jQuery, I figured I’d start there and see if there were any plugins which would meet the need.

To my dismay, it seems as if kids these days are all using flash (flash!) to implement asynchronous upload. This was wholly unacceptable to me for some reason (not to mention it might cause compatibility issues for downstream clients) so I ended up tackling it myself šŸ˜€

The basics of getting this to work are simple enough; the solution is made of three main components:

  1. The main page that is displaying the upload control. Since I was using this in a SharePoint site, I wanted to write my uploader as a web part (the control) that could be placed on any page. The main page is simply the container for your control. It does not post back.
  2. The control that basically just renders the <iframe/>. The control is relatively simple. It provides a container for the <iframe/> and also the scripts which are executed when the frame is loaded and unloaded. The control also holds the progress layer since we want this to be shown when the user starts the upload. This also does not post back.
  3. The upload page that receives the actual file. This page is the target for the <iframe/> and contains the logic that validates the posted file. This is the only page that posts back.

Before we go into the details, let’s look at the screens of this in action (pay particular attention to the times):

The first screen shows the general layout of the page in the default state. In case you’re wondering, I found a handy guide for hacking the file input control and used that to customize the appearance. Again, note the time.

Once you click “Upload”, a progress layer is shown over the control. You can also see that we’ve got an unloaded time now as well.

And finally, you can see that the loaded time changed once the form upload completes.

The control ASCX file contains two very simple scripts:

The first function is called when the frame is loaded and the second function is invoked when the file upload is submitted. Note that both functions are called from the upload page in the <iframe/>. In this case, I’ve just added simple animation calls to show and hide a progress panel. You can hook up whatever custom code you want here.

On the upload page itself, we need to wire the events to the functions above:

It’s important to note that the upload page gets its own set of window events since it’s loaded inside of the frame. The upload page makes calls to functions in the control. I’ve highlighted the points of interest; you’ll note that I only bind the load event of the window (I don’t bind the unload). It’s also possible to do this using the onbeforeunload event, but I found that this would fire the progress layer even if I was browsing away from the page (which may confuse your users). So it made more sense to just do it simply from the upload button click.

The upload page itself is remarkably simple:

The control isn’t much more complex either:

There’s no codebehind for the control to speak of. The only place where you need to implement custom code is in the codebehind of the upload page to receive the posted file:

There you have it. Works in SharePoint 2007 just fine. Works in IE7 and Firefox 3.5 as well. Because the receiving upload page is just an ASPX page, you can simply output your errors or success messages to the page itself; no special hackery required.

Download the source code here: AsyncUploadControlTest.7z (17.54 KB)

You may also like...

2 Responses

  1. Marc says:

    the AsyncUploadControlTest.7z download link is not working

  2. Chuck says:


    Thanks for notifying me; I’ve remapped the MIME type mappings for .7z files on the server.

    Much appreciated. Let me know if you have any questions on the sample.