ajax extensions file upload workaround

Posted on March 31, 2007. Filed under: Web Weaving | Tags: ASP.NET, AJAX, File Upload, IFrame |

In my previous post of “Upload files using asp.net ajax extensions,” I had written my approach that I implemented to upload files. As about 65% of the total clicks to my blog page is only to that post, I have decided to write a new post with complete codes for file upload. The code is fully functional and is tested in Firefox 2 and IE6.

The approach is much similar to my previous post, as it uses iframes. But in this project, I have created everything in a single file, so all codes can be handled easily. And coder will feel that s/he is completely implementing ajax extensions, in addition to users who will have experience of partial page postback.

In this simple project, I have written code to do file upload and display all files uploaded in a listbox without doing full page postback.

asp.net ajax extension - file upload project

download project file

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

Make a Comment

Make A Comment: ( 35 so far )

35 Responses to “ajax extensions file upload workaround”

RSS Feed for No hallucinations; just some realisms, and sometimes JPT stuffs! Comments RSS Feed

Very nice. Thank you of this valuable information.
But if I want use it in a GridView (each line in my GridView can upload an image), how can I do this line

Louis
March 31, 2007

Responding to Louis: Thanks for the comment. If you want to use the approach that I have used, then for each grid you will have to put an iframe and pass RowID to the source file of each iframe. Simple.

But if you are displaying like thousand records you will have thousand iframes and thousand page loads. Not a great idea! Okay, here is what I would recommend..

1. Make pnlIFrame a floating layer and make it hidden (panels are rendered as div, you can write style=”position:absolute;display:block;”). Name the iframe “iUploadFrame”.

2. On each row, put an icon for file upload - when the icon is clicked pnlIFrame would be displayed. You can do something like: );” />

3. Now create the function StartUpload:
function StartUpload(rowID) {
window.iUploadFrame.location.href = “default.aspx?MODE=IFRAME&RowID=” + rowID;
//more codes to show the iframe at correct position
}

4. In upload code, you can track the RowID that is used, and hence process your upload in appropriate way.

vkshrestha
March 31, 2007

Hi,

Could you please put the project file onto another place?

I can not access this link from my location due to some filters in my ISP.

Many thanks,

Thuc

Thuc
April 1, 2007

exlent
This code is very useful.
Thankyou very much.

Anish
April 4, 2007

Hi,
This is a good work. Using this how big files can be uploaded? I’m in need of a upload component to upload 2GB video files. Can this be used for it?
Thanks.

Sona
April 10, 2007

Good job. It works well.

Is there a workaround to get this without using session variables. My current project does not permit session variables.

Thanks.

dotnetuser
April 20, 2007

Responding to: DotNetUser

Yes, you can save files wherever you want (database/file system/ or just process them).
I used session variables just to store filenames.
I used it because how uploaded files are handled is not the objective of this article.

Thanks.

vin
April 22, 2007

thank you

juul
May 15, 2007

Great work, ty for your contribution!

izio-italy :D
May 22, 2007

First I want to thank you for your work. Now my question, does anyone know, if this works with DotNetNuke? I tried to use this with a DotNetNuke module but it doesn’t work. Maybe I make something worng.

Kind Regards

Kevin

Kevin
May 29, 2007

Responding to Kevin:
Thanks for your comment.
In fact, I had implemented this approach when making our own custom module in dotnetnuke and it is working fine.

vin
May 30, 2007

very nice!thnx!

pauix
June 1, 2007

Sorry, but that was just rubbish!

Dave
June 1, 2007

Hello,
Thanks so much - this looks exactly like what I need. But… asp:AsyncPostbackTrigger is not found in my Intellisense dropdown list. What do I need to configure so that it is found? I am using VB in VS2005, with asp.net 2.0, version v1.0.61025.

Thanks!
-JC

JC
June 14, 2007

This looks great but I’m having a problem with Master Pages. Is there a way to hide everything on the master page so that just the upload section is shown??

Josue
June 28, 2007

Not working when File upload Control is in a Modal Popup

Anil
July 2, 2007

Good stuff. Thanks for the contribution.

I am facing problems using this technique when the button is in a Wizard control.

Problem: Pushing other buttons (e.g. Previous, and Next) on the page with the Wizard control, posts backs the whole form again with the file uploads. This is the same as not having the async file postback.

I can’t reset the form, as I have other data in the previous page of the Wizard control.

Can you please suggest a way to clear the FileUpload control once the async postback is completed. As I am aware, you cannot clear the ’s value attribute using JavaScript.

Kr,
Ethan

Ethan S
July 7, 2007

is able to add files in a hidden iframe and upload multi-files using asp?

amy
July 16, 2007

[...] postback. For instance, file uploading won’t work using AJAX (unless you use some crazy IFrame methods), so you will have to set whichever button you use to submit your file to trigger a full page [...]

ASP.NET and AJAX: So Freaking Easy (Part 2) « .NET Discussion
July 18, 2007

It seems every project I do I attempt to re-visit this issue. What I want to do is add a progress bar to what you are doing. Is this possible? I have resorted to animated GIFs in the past.

Rob
August 9, 2007

Hi Louis

I also want use it in a GridView (each line in my GridView can upload an image or any file).

are you able to archive this? I have a same requirement ….can you help me?

ARPAR
November 20, 2007

Hi Vin,

How did you get to get it working on a custom DNN Module? I tried it but I dont know how to manage the IFrame on DNN when putting the upload control on the custom module?? Do you have a code example? Please help me!!!

Sonia
December 7, 2007

Responding to sonia:
Hi. First, I think you don’t know that .net file upload upload server control cannot make ajax callbacks. My example simple does Response.Write creating html file elements to the iframe. The working example is downloadable from http://members.tripod.com/vinayakshrestha/ajax/default.html
I have been doing this in DNN and in GridView rows, so it does work.

vin
December 7, 2007

Hi Vin, thanx for your answer, I still can’t get it working on my DNN module using the same code of your example. First, I can’t have a form tag inside my ascx file, and my page always keeps loading.. maybe because inside the IFRAME the page loaded is the same default of DNN, I just don’t get how to use your code inside my custom dnn module, which is also using ajax, but I have the upload file control outside any ajax panel or container… Any lights for me??

Sonia
December 9, 2007

Replying to sonia:
here are the steps that you should follow:

1. put an iframe in the ascx page (say mypage.ascx) and have it linked to itself. Plus pass a querystring parameter like MODE=UPLOAD

2. At the very first line of Page_Load, follow these:
If Request.QueryString(”MODE” = “UPLOAD” Then
Response.Write(”")
Response.Write(”")
…
Response.Write(”")
Response.End()
End If

3. You should also handle uploaded file similarly in page load
If Request.QueryString(”MODE” = “UPLOAD_START” Then
Dim f As HttpPostedFile = Request.Form(”upFile”
.. save the posted file here..
Response.Write(”upload complete”
Response.End()
End If

vin
December 9, 2007

very interesting, but I don’t agree with you
Idetrorce

Idetrorce
December 15, 2007

I would like to see a continuation of the topic

Maximus
December 20, 2007

Thanks, it was really helpful.

Mortaza Doulaty
January 2, 2008

Hi Vinayak,

How can you implement in Master page. I got
problem that i put frame in content but however
it does not work pnlframe.visible= false
in the panal frame it show all the content how
can i make invisible this iframe with panel

Hope to get answer from you

Thank you

Regard,
Sailung Subba

sailung
January 31, 2008

Thank you.

reza shirazi
February 19, 2008

Hi, I found your code in the asp.net site, and I found a lot easier to implement, in my case, that a lot of other workarounds about the xmlhttprequest issue about file uploading. Thanks. Alejandro, saludos from Argentina

AleV_argie
March 2, 2008

Hi,
Good article,
I downloaded your code and executed it, still i didn’t understand Where file is uploaded means saved on server (that is what uploadin of file). If it is not done then please suggest how to do it?

Salahuddin
May 30, 2008