Performing File Upload using update panel and update progress


 Hi guys

I'm totally new to ajax, and Im using vs2005 and ajax 1 with .net 2.0

I've created a form for my application that allows a user to upload a file to a database. The form contains a fileupload, a button (that invokes the insert) and a repeater that lists all the files currently stored. This works great.

Now I want to use ajax to display an 'uploading...' message and animation to displaye while the file is being uploaded. Depending on the file, uploading can take quite a while, and I wanted to include some feedback to the user to let them know what's happening. I've gone through the ajax tutorial videos on getting started and using update panels etc, as well as on the update progress feature. I cnat seem to get it to work.

I first placed the repeater inside the update panel, and set up a trigger for my upload button. This didnt work. I've tried including all my controls inside the update panel, some in some out, and a few different combinations. Files are no longer uploading, (when I'm including update panels) and the update progress does nothing.

Can anyone give me a few pointers on where I should be placing the update panel, and which of my controls should go inside for both my normal functionality and my progress to work properly.

Thanks in advance

Reply dhassen 1/18/2008 11:48:30 AM 13973 articles. 1 followers. Follow

4 Replies

Similar Articles

[PageSpeed] 56

You're not going to be able to do that easily.  The only way to provide async file uploads is to put the upload element in an iframe.  Unless you use a PostbackTrigger to force a full postback, it won't work in an UpdatePanel, by design.

Encosia - ASP.NET, AJAX, and more.

Latest article: Using complex types to make calling services less… complex
Reply gt1329a 1/18/2008 2:28:23 PM

 thanks for your reply. I've already applied a Postback trigger, which of course allows the upload, but takes away the functionality of the aysnc postback and the update prorgress. This means I may as well stick with what I had before. All I really want is some feedback while the file is being uploaded. Clearly it's not as simple as I thought!!! Thanks for the link, that was helpful. How would I go about using an iframe in the manner you mention? Thanks

Reply dhassen 1/18/2008 2:42:00 PM

You just place the upload element in an iframe that's sized to inconspicuously contain it.  So, then it appears that the upload happens asynchronously.

However, that method won't get you any closer to an upload progress indicator, unfortunately.   

Encosia - ASP.NET, AJAX, and more.

Latest article: Using complex types to make calling services less… complex
Reply gt1329a 1/18/2008 3:14:36 PM

 ah right, thanks anyway

Reply dhassen 1/18/2008 3:20:44 PM
Similar Artilces:

Problem with File Upload using AJAX Update Panel
Hello Friends,    I have an default.aspx page.In that page i have included an user control named Upload.ascx. In Upload.ascx i have the fileupload control and upload button.My friends told me to use the below code  <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">    <ContentTemplate><asp:FileUpload id="FileUpload1"                            runat=&qu...

Automatically start file uploading using FileUpload Control within the Update Panel
Hi all,  I have a FileUpload control within an AJAX Update Panel and I that FileUpload to automatically start uploading file to server as soon as I select the file that I want to upload. I got this code from these forums but t doesn't seem to work probably because I am using FileUpload within UpdatePanel.  <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" /><asp:FileUpload ID="FileUpload1" runat="server" />On Server side Button2.Attributes.add("Style", "Di...

Upload file inside Update Panel without refresh whole page and without using updatepanel triggers for postback trigger
Hi All, Iam using fileupload control inside updatepanel, and save button for save the file uploaded by that fileupload to server by below code: MyFileUpload.SaveAs(Path); So that, my problem i need to perform this code without refresh whole page, so i don't want to use updatepanel triggers for save button to do postback(it referesh whole page _i need only execute  SaveAS Code to Server and all i need to  pass the problem of security issues_(not all page refresh and send to server),  and if the above code don't work if t...

How to use the Update Panels and Update progress bars in aspx page?
Hi , Usage of update panels in the aspx pages? Thanks, Venugopal Anthana   Hi, take a look at the samples of the official documentation:  Grz, Kris.Read my blog. Handy Firefox plugins for web developers.Workaround for non working Mark as answer buttons....

disable button while processing using Update Panel & Update Progress
I used this code below to disable the button while processing 'Build Function to submitDim sb As New System.Text.StringBuilder() sb.AppendLine("function doSubmit(btn){")sb.AppendLine(ClientScript.GetPostBackEventReference(Me.Button4, [String].Empty)) 'control to disablesb.AppendLine("if(btn !=null) {") sb.AppendLine("btn.disabled='disabled';")sb.AppendLine("}") sb.AppendLine("return false;")sb.AppendLine("}") ClientScript.RegisterStartupScript(Me.[GetType](), "customPB", sb.ToString(), True) Me....

Performance Issues using 10 AJAX Update Panels
Hello        I am having speed issues with one of my pages that has 10 update panels.        Each panel has a number of text boxes (with postback) that accept numerical values and update other parts of the page.        I conditionally update only those panels that need to be refreshed but it is still too slow.        I use fiddler to monitor the traffic and still see a large chunk of HTML being returned between 35KB and 55KB.      &nb...

how to use the update progress when the update panel is set conditional amd childrentrigger=false??
I am starting to use update panels. In my app some of my panels are set as: ChildrenAsTriggers="false" UpdateMode="Conditional" now how do i trigger the update progress control to display and hide since it does not do it automaticly when using these settings?   The ChildrenAsTriggers property is intended to be used only when the UpdateMode property is set to Conditional. var prm = Sys.WebForms.PageRequestManager.getInstance();prm.add_initializeRequest(InitializeRequest);function InitializeRequest(sender, args) {  if (prm.get_isInAsyncPostBack())  ...

File upload + update panels
Just wondering if anyone has come across a similar issue I have a file upload in an update panel when I browse for the textfile and click save , the value of the file upload is lost before it can be saved and nothing is added taking it out of the update panel , it works fine  anyone ?   Anyone figure this out yet ? Hi,The upload does not function inside of updatepanel. For security reason the Javascript cannot read no local archive.The workarround  is to involve the upload-control  inside of a iframe for that the solicitation is made outside of updatepanel &nbs...

File Upload in an update panel
Hello, I have a master page , in which i have update panel. I am using this master in  one aspx page in which i have fileupload control and button to save the file. Because the file upload is not compatible with update panel , i wanted to use asyncupostback trigger for update panel in master page. in that trigger tag when i tried to set button id which is in aspx page , it is giving me stack overflow exception saying that ID is not recognizable. How to set that trigger tag in master page with the ID of aspx page?    in the child page use the .parent attribute to get acces...

how to upload the files from the update panel ??
Hi there, following are the problem i am facing...  Update Panel cannot using the fileupload control. This is what i want to achive..... When user click on the Image button, it will triggered the user for file uploading,when user select the file, it will auto postback and upload the file into the server side........ Note: Using the Imagebutton as a fileupload control, Not the fileupload control.  this is how i created ...  i created a fileupload control outside the update panel. Using the javascript, when user click on the imagebutton(i assigned the onclick functio...

upload file and update panel
hi there, how do I implement the upload file in the udpate panel? I'm having the error for postedfile has a value of nothing and I believe it's because i placed the upload file button in the update panel. Note: have tried placing the upload button outside the update panel and it worked! any clues?thanks ronald_yoh:Note: have tried placing the upload button outside the update panel and it worked!That's the only way.You will need a full postback to upload the file because it can't be uploaded using partial postback.You can also register the button as a postback cotn...

Ajax :Update Panel File Uploader!
Hi ,Im using the Update Panel which contains the FileUploadControl but am not able to upload any Image.I do not get any error..!!!Could anyone please suggest me with the same..Thanks n Regards,Francis   Ferns Hi, Update panel is not supporting file upload. plz go thru this fileupload  hope this helpsWith LuvDhanaDont forget to mark as answer if my reply helped you... Hi, According to the docs, the UpdatePanel doesn't support the FileUpload control. However, "To use a FileUpload control inside an UpdatePanel control, set the postback control that sub...

File upload is not working in update panel
Hello Everbody, i want to ask: i'm put the fileupload in update panel but if i want to get the filename use fileupload1.filename is not working? but if i do not use update panel is working.. Thanks  File upload does not work from a partial update request you will have to tell the updatepanel to make a full post back  how can i use fileupload in update panel, i'm very stressfull. My Final Assignment must use fileupload and update panel?Please help me... Thank you  sory my english is not very good   I can't really help you for your test:)You...

Update Panel+File Upload (2)
Hello Everybody, please help me I tried to use file upload and update panel, and the result is good because file upload now can be use in update panelthe method use trigger like this<update panel><content template> <asp:fileupload ... /><asp:imgbutton name="ImgSaveBlogs" /></content template> <Triggers >      <asp:PostBackTrigger ControlID="ImgSaveBlogs"/>          </Triggers>   </updatepanel>  but must twice you click ...

File upload unser Update panel
HiI have used file upload under update panel in two forms.In one form it is working fine by writing this.btnAdd.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(lbtnUploadfile, "")); Where "btnAdd" is the button under update panel &  "lbtnUploadfile" is the linkbutton outside update panel, It is doing full postback & uploading the file.But same code I have writen in another form, here 1st time file is not uploading, 2nd time onwards it is uploading the file by clicking link button.Do you have any idea on this.&nbs...

Update Panel and File Upload Control
Hello, I have a question regarding UpdatePanel and FileUpload.  I know that the File Upload control doesn't work inside an update panel unless you have a full post back trigger. However, this does not seem to be working, and I was wondering why.  I have the File Upload control in an update panel and the button that controls it outside of the panel. Could that be causing the problem?  Line 47 below shows where the File Upload control is.    1 <asp:UpdatePanel ID="UpdRType" runat="server" UpdateMode="Conditional"> 2 ...

The connection to the server was reset while the page was loading
I have this problem with this download functionality. I'm using a drop down list, and when the user selects an item in that list (selectedindexchanged), a repeater control is automatically binded with the datasource and the repeater is nested in an update panel so no full post back occurs.   The problem is some downloads in the drop down list will not work but others will. The ones that don't work says "The connection to the server was reset while the page was loading," and in IE it just says "Internet Explorer cannot display the web page "   I ...

Help with my Update Panel and my File Upload Control
I have an UpdatePanel and within that I have an asp:FileUpload control. Now, I dont need to upload the file over AJAX, I just need to populate my UpdatePanel with values, then use a button inside the UpdatePanel to save the details. But when I click the button my FileUpload control apparently has no file information but it does! Here is my code: <aspajax:UpdatePanel id="subjectMaintenancePanel" runat="server" UpdateMode="Always">     <Triggers>         <aspajax:AsyncPostBackTrigger ControlID="subjectsRepeater" /> &nb...

file upload not working inside update panel
Hii upload files successfully and then i drag update panel and put the button and file upload control and assign the async post back to the click event of the button and try tp upload it didn't upload !!! why?any idea? thanks in advance.  Hi,there are some controls which is not compatibale with update panel like Treeview, Menu,FileUpload, so you will need to place your fileupload outside the update panel.check out this post for complete details: thanks sharp guy...

problem with file uploader in update panel help
Dear all,    I read that file upload controler not work properly in update panel. But here im facing some problem when i am not using update panal.    I have to upload an image when am clicking in a row of a gridView. So i just called a poupup window which holds the file uploader, and a button to save the file.but when am clicking on the button another popup to the same page is comming.      Hope a fast replay from all  Thanks,   Biny Balan.P  there is problem in your code.. we can't help out  without code so p...

File Upload Control is not working in Update Panel
hi friend... i am using update panel... in one of my aspx page (ASP.NET 2.0)there is a file upload control in update panel which is used to upload company logo on server..when i remove the update panel.. than file upload is working properly..but when i again place an update panel then file upload control is not working and its giving me error.. in likeIf String.IsNullOrEmpty(fldLogo.PostedFile.FileName.ToString) Then                 as object reference not set to an instance of an object... can any body help...

File upload control not working with update panel.
Hi,  I am using a file upload control within update panel. but I am not getting the filename on server side. Is there any problem with update panel? How can I solve this issue? I am hereby attaching sample code for file upload control with update panel. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:FileUpload ID="FileUpload1" runat="server" /> <asp:Button ID="Button1" runat...

how to have a full postback while file upload in update panel
hi,   I have implemented the ajax file uploader component ( in my project by embedded the uploader component in update panel while keeping the other fields in form outside the update panel.   Other fields(chained drop down list, textbox) in the form have required field validator attached to them.   when i fill the form fields and then click the upload button, it starts the uploading process and copies the file in the background, but do not display anything in server trace message box.   the problem here is that it req...

File Upload Control Not Working with Update Panel
Hi All, I am using a File Upload control in a Web form which has a Update Panel.I have placed a File Upload Control inside the Update Panel.When I am trying to upload a file using the control the PostedFile becomes null.But if I do not use Update Panel or place the control outside the panel it works fine.I have tried to solve the problem using triggers but couldn't manage it.Is there any way to keep both the control and update panel in the page at the same time?   Regards, Upamanyu Web Developer   The FileUpload control does not work using an asynchronous postback from ...