Upload large file in ASP.net using Update Panel with Progress Bar

It is very simple to upload files in asp.net using File Upload Control with Ajax Update Panel and Update Progress, but some important points you need to remember while uploading files on server. Few things you need to remember:
·         Using Update Panel place your File Upload control inside Update Panel
·         Use PostBackTrigger inside update panel , without using the shows blank when you Upload
·         Use UpdateProgress and associate Update panel ID with your Update panel
·         Inside Progress Temple place your loader Image or Text
·         Write a JavaScript code to show your Progress Panel active
·         Call your JavaScript function on OnClientClick of Upload Button
·         If you face the problem while uploading files because of file size and getting time out or 404 error,  (in asp.net only 4096 KB i.e. 4 MB) are allowed to upload. Then you need to make changes in your web.config as below
·         You need to increase time out also in web.config (by default it is 110 sec only)
In above code we have set maxRequestLength 50 MB and execution time out to 600 secs.
.aspx code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>File Uplaod</title>
    <script type="text/javascript">
        function waitingProgressBar() {
            if (document.getElementById('fUpload').value.length > 0) {
                document.getElementById('myUpdtProgress').style.display = 'block';
            }
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptUpload" runat="server"></asp:ScriptManager>
    <div>

    <asp:UpdatePanel ID="updtPanel" runat="server" UpdateMode="Conditional">
  <Triggers>
    <asp:PostBackTrigger ControlID="lnkUpload" />
    </Triggers>
    <ContentTemplate>
            <asp:FileUpload ID="fUpload" runat="server" />
    <asp:LinkButton ID="lnkUpload" runat="server" Text="Upload"
            onclick="lnkUpload_Click" OnClientClick="javascript:waitingProgressBar();"  ></asp:LinkButton>
    </ContentTemplate>
    </asp:UpdatePanel>
        <asp:UpdateProgress ID="myUpdtProgress" runat="server" AssociatedUpdatePanelID="updtPanel">
    <ProgressTemplate>
    <img src="ajax-loader.gif" alt="uploading" /> uploading..
    </ProgressTemplate>
    </asp:UpdateProgress>
    </div>

    <div><asp:Label ID="lblMessage" runat="server" Visible="false"></asp:Label></div>

    </form>
</body>
</html>


.aspc.cs  code:
protected void lnkUpload_Click(object sender, EventArgs e)
    {
        try
        {
            System.Threading.Thread.Sleep(2000);
            string fileName = fUpload.FileName;
            fUpload.SaveAs(Server.MapPath("~/Upload/" + fileName));
            lblMessage.Visible = true;
            lblMessage.Text = "File uploaded successfully.";
        }
        catch (Exception ex)
        {
            lblMessage.Visible = true;
            lblMessage.Text = "Error while uploading file " + ex.Message; ;
        }

    }

Comments