ajax extensions file upload workaround

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

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).

.

.

Advertisements

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

48 Responses to “ajax extensions file upload workaround”

RSS Feed for vinayak’s web whistles 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

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.

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

exlent
This code is very useful.
Thankyou very much.

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.

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.

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.

thank you

Great work, ty for your contribution!

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

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.

very nice!thnx!:)

Sorry, but that was just rubbish!

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

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??

Not working when File upload Control is in a Modal Popup

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

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

[…] 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 […]

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.

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?

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!!!

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.

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??

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

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

I would like to see a continuation of the topic

Thanks, it was really helpful.

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

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

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?

source the code not found,please up for me :tamvolinh@yahoo.com.au
thanks.

I appreciate the work you have done.

It would be great to have progress bar and cancel support for usability reasons.

Regards,
LTG

Can you write this code using c# ?
thank you

its really a great post.BUT i have problem em not able to implemnet it a webusercontrol instead of web page. ifram is not loading my webusercontrol’s component.its giving error could not find /prjMyproject/webusercontrol.ascx ..i have my control at /prjMyproject/controls/webusercontrol.ascx

dont know wot to do of that

hi great site nice work thanks www youporn cpm =) redtube similar sites see u

U are mother fucking genius))
Nicccccccce

hi Vinay,
Your code is woking fine with small files.
Its not working with large media files.
Even I changed settings in web.config file

Thanks,

This solution will not work where you have huge application with nested master page and you have web user control where you tries to filter with only file upload dialog. This is not a good solution

I have scenario, put detailsview in Updatepanel and in the detailsview I have fileupload control, On the detailsview inserting event I need the file that I have upload. Does anyone have solution of this issue?
Plz email me at
toakhtar@hotmail.com
Thanks alot

Grt, but I’m trying to preview the document in IFrame as soon as clicking the browse button and selecting the file ie., without the Upload button event. Are there any way for acheiving this?

hey guys m new to dot net and uploading files to server is my first project.
i tried the above code and the system gives the message that file is uploaded,
but i have a problem that i cannot find the path where the files are stored.
also i want to save to a directory UPLOAD on my server so how can i accomplish this task.
any help is appreciated……..

How to do bulk upload like photo album?
thanks, Diana

Binay Dai thanks for giv references to file uploader, which i was trying to do at my project ..

super jop thx 😉


Where's The Comment Form?

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

%d bloggers like this: