FileUpload Doesn't Work When Nested In UpdatePanel? C#

Question

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                        <asp:FileUpload onchange="clickTheButton();" ID="FileUpload1" runat="server" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="Button1" />
                </Triggers>
</asp:UpdatePanel>

Button 1 is outside the update panel and the javascript that gets run when a user adds a file in the upload box is this:

function clickTheButton() {
            document.getElementById('<%= Button1.ClientID %>').click();
        }

The problem is simple. FileUpload1.HasFile == false. I don't know why this is, but when I put it in the update panel it ceases to work.

I have seen some other threads on this. But none of them answer why this is happening, they just point to things you can download.

EDIT: Really my main reason for wanting to do this is so that I can get a ..Uploading File.. Tag to pop up while the client is uploading to the server and once it has completed, display it in a datalist. I just cant get the UpdateProgress to work.

This helped me , gave clean explanation https://www.c-sharpcorner.com/uploadfile/prathore/fileupload-control-in-update-panel-using-Asp-Net-ajax/ — raw_hitt, Jul 28 '21 at 10:48

score 19 · Accepted Answer · answered Jan 21 '10 at 14:40

19

Basically you just need to make your button do a full postback to send the file. Also make sure that you have this.Form.Enctype = "multipart/form-data"; set in your code, or you can put in that page. AsyncPostbacks don't work with files for security reasons as mentioned, without hacks. (I've never been able to get it to work).

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
           <asp:FileUpload onchange="clickTheButton();" ID="FileUpload1" runat="server" />
      </ContentTemplate>
      <Triggers>
         <asp:PostBackTrigger ControlID="Button1" />
      </Triggers>
 </asp:UpdatePanel>

answered Jan 21 '10 at 14:40

jamone

17,253
17
63
98

Update progress doesn't work with a full postback though right? – Jason Jan 21 '10 at 20:29
Correct, you won't have a way of monitoring the progress, except if your browser shows a loading bar during postback, which doesn't seem to be a reliable way on all browsers. – jamone Jan 21 '10 at 20:57
this is very old, now we can postback via js, but how? – Adeem Apr 18 '14 at 01:44

score 4 · Answer 2 · edited Mar 12 '23 at 15:03

4

For security purposes, browsers don't let you post files via javascript. Imagine if I could write a little bit a javascript to asynchronously submit the contents of your My Documents folder to my server.

So javascript-ish methods of posting the form, like the XMLHttpRequest used by the UpdatePanel, won't work.

This post describes a decent work around if you're on 3.5 SP1. Link

And this post describes a couple work arounds if you'd prefer not to use the AjaxControlToolkit. Link

edited Mar 12 '23 at 15:03

Glorfindel

21,988
13
81
109

answered Jan 21 '10 at 14:34

Kyle Chafin

607
8
16

Note that this answer is heavily outdated, as it predates the existence of HTML5 file uploads (and the even newer file system access API). – Brian Jul 28 '21 at 15:14

score 4 · Answer 3 · edited May 23 '17 at 10:31

File Upload will not work with a partial post back. So just add this line at your page load

ScriptManager.GetCurrent(this).RegisterPostBackControl(this.YourControlID);

Or use PostBackTrigger.

<Triggers>
            <asp:PostBackTrigger ControlID="YourControlID" />
</Triggers>

Or You need special AsyncFileUpload control as defined in AjaxControl Toolkit.

<ajaxToolkit:AsyncFileUpload OnClientUploadError="uploadError"
     OnClientUploadComplete="uploadComplete" runat="server"
     ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern"
     UploadingBackColor="#CCFFFF" ThrobberID="myThrobber" />

You can check here.

FileUpload Doesn't Work When Nested In UpdatePanel? C#

3 Answers3

Linked