How to use FileUpload control inside ASP.Net AJAX Update Panel

How to use FileUpload control inside ASP.Net AJAX Update Panel

There are plenty of questions asked by developers around the globe that they are not able to use FileUpload asp.net control inside ASP.Net Ajax update panel. Their issues are FileUpload control inside Asp.Net Ajax update panel doesn’t hold any file and also return false for HasFile property whenever they upload any file.

There are plenty of questions asked by developers around the globe that they are not able to use FileUpload asp.net control inside ASP.Net Ajax update panel. Their issues are FileUpload control inside Asp.Net Ajax update panel doesn’t hold any file and also return false for HasFile property whenever they upload any file.

Don’t worry! This is because the uploading and manipulations of files are restricted by default in client side for security purpose. That’s why this is not possible to upload files using asynchronous postback in UpdatePanel. you can do it just by changing the Trigger of the upload button from AsyncPostBackTrigger to PostBackTrigger.

Note – Asp.Net Controls that are reside in updatepanel, cause an async postback/update by default. That’s why the page will postback and get partial rendering. Now if for any reason you have control inside an updatepanel which you have to make a full postback rendering, then you need to set it explicitly as a postbacktrigger.

ASP.Net Webform(Aspx) Code :

To use ASP.Net Ajax, you have to add reference ajaxcontroltoolkit.dll in your solution first then you can use below code to upload a file.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FileUpload.aspx.cs" Inherits="Open_FileUpload" %>
<!DOCTYPE html>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>  
        <div>
            <asp:UpdatePanel ID="up1" runat="server">
                <ContentTemplate>
                    <asp:FileUpload ID="fileUpload" runat="server" />
                    <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="btnUpload_Click" />
                    <br />
                    <asp:Label ID="lblMsg" runat="server" Text=""></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:PostBackTrigger ControlID="btnUpload" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Code behind .cs code :

For demo purpose, I am trying to allow the user to upload only jpg or jpeg images.

protected void btnUpload_Click(object sender, EventArgs e)
    {
        string filePath = string.Empty;
        if (fileUpload.HasFile)
        {
            string fileExt = System.IO.Path.GetExtension(fileUpload.FileName);
            if (fileExt.ToLower() != ".jpg" && fileExt.ToLower() != ".jpeg")
            {
                lblMsg.Text = "Upload JPG images only.";
                lblMsg.ForeColor = System.Drawing.Color.Red;
                return;
            }            
            filePath = fileUpload.PostedFile.FileName;
            if (File.Exists(filePath))
            {
                File.Delete(filePath);
            }
            fileUpload.PostedFile.SaveAs(Server.MapPath(@"../UploadedImages/" + filePath.Trim()));          
        }


by RAVI RANJAN KUMAR


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Add asp.net Identity in empty project

LIKE | COMMENT | SHARE | SUBSCRIBE Today, in this tutorial you will see the process of adding an ASP.NET Identity to the ASP.NET Web Application developed in...

List all users from asp net core identity

LIKE | COMMENT | SHARE | SUBSCRIBE In this video, i will show you How to retrieve and display all the registered application users in asp.net core using the ...

Extend IdentityUser in ASP NET Core

LIKE | COMMENT | SHARE | SUBSCRIBE In this tutorials, I will show you how to extend IdentityUser in asp.net core.. Subscribe & Stay Connected! Thank You! ♥ #...