Uploading files using asp.net ajax extensions

Posted on March 13, 2007. Filed under: Uncategorized | Tags: , , , |

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.

About these ads

Make a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

32 Responses to “Uploading files using asp.net ajax extensions”

RSS Feed for vinayak’s web whistles Comments RSS Feed

good article… but i prefer to use 3rd party component from http://www.arindsoft.com for uploading file within Ajax UpdatePanel :)

Really I impress by this blog. Good One.
Regards,
VBM

nice article. thanks for showing us a way to do it.

‘btnUploadComplted’ has been misspelt in the above example on one occasion – Fix that and it will work as intended.

Thanks for the example :)

Hi there,
The problem is not in browsers’ security settings – it’s a limitation of the xmlHttpRequest object used for AJAX requests.

does not work when using larger files…

i want to know how to see this uploaded file
which we can upload

didn’t setisfied with this answers

very nice article. i got solution for my problem. thank you.

Great contribution to the ASP.NET community. It helped me a lot. Keep the good work up.
Thanks so much.

I use a simular approach, but it’s a bit less complex. You’re right with using iframes to do it.

You simply use an iframe to upload the image, but you can than use client side javascript to alter the parent window so that it transfers a value over.

On my site I use an iframe to test and upload a jpeg image for a user avatar, then I go ahead and save that file to a “pool folder” on the server with an autoincremental number. After the upload is complete I just use a panel with a literal control to update a hidden input on the parent window with a runat server attribute.

I wish there was a way around iframes though…

Thank u

But iwant to keep UpdateProgress bar in the same page of Updatepanel with file uploadcontrol.in the above cases progress bar is not working and send me reply through mail(venkat55720@gmail.com)

thank u … :)

Whats up dude … i saw some good work form you in the blog … keep in touch …

Upload File to a server using javascript to
server in Asp.net with out Ajax
click here http://www.ashfk.blogspot.com/

Thank you very much. good article… but i prefer to use 3rd party component from http://www.webjyotish.com for uploading file within Ajax UpdatePanel :)

This code is good.
But will it work for magic ajax

A control with ID ‘btnUploadCompleted’ could not be found for the trigger in UpdatePanel ‘pnlMain’.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: A control with ID ‘btnUploadCompleted’ could not be found for the trigger in UpdatePanel ‘pnlMain’.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

[...] written by Vinayak Kumar Shrestha on uploading files within .NET apps masked by a little AJAX. http://vinayakshrestha.wordpress.com/2007/03/13/uploading-files-using-aspnet-ajax-extensions/ Feel free to share and enjoy this [...]

nice article

this way below is much simpler

Add this to your button control:

OnClientClick=”javascript:document.forms[0].encoding = ‘multipart/form-data';”

-or-

Make your page Form tag look like:

May I suggest to make UpdatePanel to upload by using smth like __doPostBack(“”,””);

code is postbacks whole page when click on the
button? could you please tell if it is really
works?

Excellent Work!

good one

thanks, i am doing ASP.NET school project right now, and faced the same problem, I will try to implement your method to solve my problem to see whether it is work or not.

hi,

I just came across a scenario. There are two grids. I need to populate the first gridview in page load. While clicking a row I need to display another grid with the details of corresponding row(clicked row).

Pagemethods can’t be used here since bindgrid method has non-statical values.

I tried with ICallbackEventHandler and XMLHTTPREQUEST. But both are not populating the second grid. I thought it’s not rendering properly. Tried with rendering that particula control. But again failed…….

Your article is really good…

Can you help me out to fix this issue.
Kindly reply me if you require more details.

Nishithraj

thanks for the post
its working
superb job

Difference not work to FileUpload use

so nice thx :))


Where's The Comment Form?

Liked it here?
Why not try sites on the blogroll...

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: