Uploading files using asp.net ajax extensions

The current ajax extension (Version: 1.0.61025.0) does not support file upload within the UpdatePanel. I am not so sure why, but I have heard it to be because browser security limitations. As browsers do not allow direct access to user file system via javascript codes, and due to this reason the <input type=”file”> cannot be modified by javascripts and also the details of file cannot be accessed without any activex, not working of file uploads in ajax approach is quite obvious.

But, most of us all have seen the new generation internet mailbox system, which does upload files (attachments) in background without page refresh. The method then should be ajax implementation or some other trick. I have no idea!

When GMail was in baby stage, I had heard that it uses hidden frames to implement ajax like infrastructure - due to browser security reasons. (But I think, GMail now uses ajax). Knowing this rumor, I once happened to create multiple files upload system using hidden iframe and javascripts - user would provide a list of files and they would get uploaded to the server one by one. The creation easily solved the problem of maximum file size limit, and also errors when doing large file upload.

Now, as I am onto ajax extensions and as the uploading is not working within UpdatePanel, I went to give the same approach a try. And after some good amount of time, I was able to do it. Here is my approach outline in basic form:

1. I first created an upload form in separate page which is like this (myIframe.html):
<form method="POST" target="_self" enctype="multipart/form-data" action="main.aspx">
<input type=”file” name=”fileUpload” />
<input type=”submit” value=”UPLOAD” />
</form>

2. In my main page (main.aspx), I put an iframe and loaded that page in it. I also made borders invisible so it did not look like it is an iframe.
<iframe name="iUploadFrame" src="myIframe.html" frameborder="0" onload="iUploadFrameLoad();"></iframe>

Note that I am also specifying onload event handler function of javascript. I will explain it below.

3. For testing, in main.aspx I also have UpdatePanel with a button and label like this:
<asp:UpdatePanel ID="pnlMain" runat="server">
<ContentTemplate>
<asp:Label id=”lblMessage” runat=”server” />
<asp:Button id=”btnUploadComplted” runat=”server” style=”visibility:hidden;” />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”btnUploadCompleted” EventName=”Click” />
</Triggers>
</asp:UpdatePanel>

Note that I have hide the button using CSS style, but not setting visible=”False” attribute. This is because I still want to have the button html in the output document and would want to trigger the ajax callback via that button.

3. I then define the click event hander of the button in the codebehind as:
Protected Sub btnUploadCompleted_Click(s As Object, e As EventArgs)
lblMessage.Text = “UPLOAD PROCESS COMPLETED SUCCESSFULLY”
End Sub

4. Now, to save file I write following code in the code-behind:
Protected Sub Page_Load(s As Object, e As EventArgs)
If Request.Files.Count = 1 Then
‘ process to save file
Response.Write(”SUCCESS”)
Response.End()
End If
End Sub

5. Now all that we need to do is create javascript function to integrate the process into ajax implementation. The event will trigger when upload process is complete, and it will, in turn, triggers btnUploadCompleted’s click event, which is responsible for making our ajax call.
<script type="text/javascript">
function iUploadFrameLoad() {
if (window.iUploadFrame.document.body.innerHTML == “SUCCESS”) {
document.forms[0].elements[btnUploadCompleted].click();
}
}
</script>

.

.

NEW: I have written a new post with complete source code for this process. View post.

.

.

NEW: Uploading files in a GridView (Feb 20, 2008).

.

.

Do write me comments and suggestions on this article.