FileUpload is not working within update panel

Question

So what I am trying to do is, have a user select a file to upload. Since I am only going to accept images, I will test the extension. I also want to limit the file size to under 2mb, so I will test that(haven't implemented in code yet). If the file they have selected passes, then I want the label to say "File Accepted", and store the file upload information for a later button click. This will happen once the user has finished filling out the rest of the form. Eventually, I will put an UpdateProgress control on the page while it is checking if the file is allowed. I would rather not have it post back for this, so if I can get it to work, that would be great. BTW, this will all work fine if I take the label out of the update panel.

What happens when I run this, is it will go to the else statement of the first if and return "Please select a file." Meaning that FileUpload1.HasFile is returning false. The only reason I can see that this is happening is because the UpdatePanel can not access that info from the FileUpload control?

Code Behind:

    Label SubmitButtonLabel2= (Label)UpdatePanel1.FindControl("SubmitButtonLabel");
    if (FileUpload1.HasFile)
    {
        string[] fileName = FileUpload1.FileName.Split('.');
        if ((fileName[fileName.Length - 1] == "jpg") ||
            (fileName[fileName.Length - 1] == "gif") ||
            (fileName[fileName.Length - 1] == "bmp") ||
            (fileName[fileName.Length - 1] == "jpeg") ||
            (fileName[fileName.Length - 1] == "png"))
        {
            SubmitButtonLabel2.Text = "File Accepted.";
        }
        else
        {
            SubmitButtonLabel2.Text = "File type not allowed.  Please choose another.";
        }
    }
    else
    {
        SubmitButtonLabel.Text = "Please select a file.";
    }

Page:

<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <asp:Button ID="SubmitButton" runat="server" Text="Submit File" OnClick=SubmitButton_Click />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">
            <ContentTemplate>
                <asp:Label ID="SubmitButtonLabel" runat="Server" />
            </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger ControlID="SubmitButton" />
            </Triggers>
        </asp:UpdatePanel>

    </div>
</form>
</body>

score 24 · Answer 1 · edited Jul 30 '21 at 11:28

24

No need to do anything you just need to add multipart data attribute to your form.

Page.Form.Attributes.Add("enctype", "multipart/form-data");

See the following link for more details.

http://knowledgebaseworld.blogspot.com/2009/02/file-upload-not-working-with-update.html

edited Jul 30 '21 at 11:28

Vikrant

4,920
17
48
72

answered Nov 06 '09 at 07:08

Jalpesh Vadgama

13,653
19
72
94

score 13 · Answer 2 · edited Jul 12 '12 at 11:11

13

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

Add the trigger for the UpdatePanel and give the ControlID. In case you are using TabContainer, use the ID of the tab container.

edited Jul 12 '12 at 11:11

Druid

6,423
4
41
56

answered Jul 12 '12 at 09:03

Pramod

131
1
2

2

This worked for me... Here is a small article on it. http://www.aspsnippets.com/Articles/Using-FileUpload-Control-inside-ASP.Net-AJAX-UpdatePanel-Control.aspx – Muhammedh May 05 '14 at 07:47

score 9 · Answer 3 · edited Nov 23 '11 at 10:16

9

Add this line in your page_load

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

edited Nov 23 '11 at 10:16

Hans Olsson

54,199
15
94
116

answered Dec 23 '09 at 18:51

Mobenn

91
1
1

Great!!!!! Thanks a lot!!!! I used "Page" instead "this": ScriptManager.GetCurrent(Page).RegisterPostBackControl(this.Button); – Marcio Nov 20 '21 at 04:17

score 5 · Answer 4 · edited Nov 16 '12 at 23:55

5

If you use FileUpload control in Update panel you have to set PostbackTrigger for the button you write the code to save the upload file.

Now Following code I have btnSave button for save the file in the upload folder. So I set the postbacktrigger for it.

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

Hope this will help you.

edited Nov 16 '12 at 23:55

Peter O.

32,158
14
82
96

answered Jul 17 '11 at 06:34

purav

51
1
1

score 4 · Answer 5 · answered Nov 06 '09 at 08:35

Default asp.net FileUpload control will never work with UpdatePanel. You need special AsyncFileUpload control as defined in AjaxControl Toolkit. This

http://www.asp.net/ajax/ajaxcontroltoolkit/samples/AsyncFileUpload/AsyncFileUpload.aspx

alt text http://ruchitsurati.net/files/fileupload.png

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

score 3 · Answer 6 · answered May 03 '17 at 16:06

I got it working after using two of the solutions posted here.

I had to add both

Page.Form.Attributes.Add("enctype", "multipart/form-data");

on Page_Load as well as

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

on the markup for the update panel.

score 3 · Answer 7 · answered Apr 29 '11 at 06:31

Make the the button to upload the file as the trigger of the Upload panel Something like this,

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlUploadImage" runat="server">
 <asp:FileUpload ID="fuldImage" runat="server"></asp:FileUpload>


       <asp:LinkButton ID="lnkbUpload" runat="server" onclick="lnkbUpload_Click">Add</asp:LinkButton>
</asp:Panel>



</ContentTemplate>
<Triggers>
<asp:PostBackTrigger   ControlID="lnkbUpload"/></Triggers>
</asp:UpdatePanel>

score 3 · Answer 8 · answered Apr 03 '09 at 06:47

3

Don't forget to change the type of the form, to allow file uploads (enctype or something like that, i'm not in front of Visual Studio so can't be that precise.)

I had the same problem.

answered Apr 03 '09 at 06:47

Gideon

18,251
5
45
64

This still won't help. The functionally of using a fileUpload in an update panel is disabled without the workaround. – Gthompson83 Apr 03 '09 at 23:36

score 2 · Answer 9 · edited Mar 20 '21 at 21:48

2

Page.Form.Attributes.Add("enctype", "multipart/form-data");

Doing this will solve your problem.

Refer to this article.

edited Mar 20 '21 at 21:48

halfer

19,824
17
99
186

answered May 24 '11 at 11:03

pinki

1,388
5
24
36

score 1 · Answer 10 · edited Oct 09 '22 at 14:05

1

You're answer can be found here

It is basically disallowed by default because of javascript and browser security reasons. But this is a workaround.

edited Oct 09 '22 at 14:05

Glorfindel

21,988
13
81
109

answered Apr 03 '09 at 20:05

Gthompson83

1,099
1
8
18

score 0 · Answer 11 · answered Apr 03 '09 at 06:08

0

My guess would be that the HasFile will only be filled when the post is already done, not before that.

You might want to check if the FileUpload1.FileName is already filled before the post is done, but I kinda doubt that.

answered Apr 03 '09 at 06:08

Wim Haanstra

5,918
5
41
57

FileUpload is not working within update panel

11 Answers11

Linked