Upload file missing

Question

i need to upload a file. while the file is uploading i need to show the progress bar. but when i click the upload button in the updatepanel the file in fileupload disappear when i add the trigger the file will upload but the progress bar will not show here is my code

<%@ Page Title="" Language="C#" MasterPageFile="~/site.Master" AutoEventWireup="true" CodeBehind="upload.aspx.cs" Inherits="fix_asset.upload" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .auto-style2 {
            height: 23px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <table style="margin:auto; padding-top:50px">
                <tr>
                    <td style="font-weight: 600; font-size: large; background-color: #0000FF; border: thin solid #000000">
                        UPLOAD MASTER FILE
                    </td>
                </tr>
                <tr style="border: thin solid #000000; background-color: #DBD5FD;">
                    <td>
                        <table>
                            <tr>
                                <td style="width:100px">
                                    Location
                                </td>
                                <td>
                                    <asp:FileUpload ID="FileUpload1" runat="server" />
                                </td>
                                <td style="width:100px">
                                    <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" OnClientClick="uploadfile()" style="width:100px" />
                                </td>
                                <td style="width:100px">
                                    <asp:Button ID="Button2" runat="server" Text="Sampling" OnClick="Button2_Click" style="width:100px" />
                                </td>

                            </tr>
                            <tr>
                                <td colspan="4" style="text-align:center" class="auto-style2">
                                    <asp:Label ID="lblNotification" runat="server" Text=""></asp:Label>
                                </td>
                            </tr>
                        </table>
                    </td>
                    </tr>
            </table>
            <asp:HiddenField ID="HiddenField1" runat="server" />
            <asp:Button ID="Button4" runat="server" Text="Button" style="visibility:hidden" OnClick="Button4_Click" />
            <asp:HiddenField ID="HiddenField2" runat="server" />
            <br />
            <hr />
            <br />

        </ContentTemplate>
    </asp:UpdatePanel>
                <table style="margin:auto; padding-top:50px; width:560px; border-collapse: collapse;">
                <tr style="font-weight: 600; font-size: large; background-color: #0000FF; border: thin solid #000000">
                    <td colspan="3" >VLOOK UPLOAD</td>
                </tr>
                <tr style="border: thin solid #000000; background-color: #DBD5FD; padding:5px 5px 5px 5px">
                    <td>
                        Location
                    </td>
                    <td>
                        <asp:FileUpload ID="FileUpload2" runat="server" style="width:100%" />
                    </td>
                    <td>
                        <asp:Button ID="Button3" runat="server" style="width:100%" Text="Upload" onclick="Button3_Click" OnClientClick="uploadfile2()" />
                    </td>
                </tr>
                <tr>
                    <td colspan="3">
                        <asp:Label ID="lblNotification2" runat="server" Text=""></asp:Label>
                    </td>
                </tr>
                
            </table>
    <script>
        function uploadfile() {
            document.getElementById('<%= HiddenField1.ClientID%>').value = document.getElementById('<%= FileUpload1.ClientID%>').value;
        }
        function uploadfile2() {
            document.getElementById('<%= HiddenField2.ClientID%>').value = document.getElementById('<%= FileUpload2.ClientID%>').value;
        }
    </script>
</asp:Content>

Answer 1

AJAX update panel is used to prevent the page to have the full postback. Using update panel we can have partial page postback. Partial page postback does the following

1.Improves the performance of the application

2.Decrease the page load time of the application

3.Decreases the round trip between the application and server

4.Only the section in web page which needs to be refreshed gets postback

We know that we can upload file to server using File upload control. However, if we use file upload control inside update panel, then it doesn't works. The reason for this is that file upload control doesn't work with asynchronous postback.

add this to your form tag and then add trigger as shown

<form id="form1" runat="server" method="post" enctype="multipart/form-data" >
.....
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID = "uploadbuttonID"/>     
</Triggers>
</asp:UpdatePanel>
.....
</form>

refer this link...

http://www.aspsnippets.com/Articles/Display-Show-ASPNet-AJAX-UpdateProgress-with-UpdatePanel-PostBackTrigger.aspx