locked
FileUpload setting maximum limit RRS feed

  • Question

  • User-614943948 posted

    I am using FileUpload control in my ASP.NET application.

    1. I want to set a file size limit of 1MB.
    2. If the user uploads a file size greater than that limit. I want a warning message to be displayed to the user about file limit, instead of showing some exception in Web.config

    How can I accomplish this?

    Wednesday, November 11, 2020 11:47 AM

Answers

  • User1686398519 posted

    Hi maverick786us, 

    1. Is there a way I can configure it in web.config
      1. You can add maxRequestLength in web.config like this:

        • <httpRuntime maxRequestLength="xxx"/>
    2. are too many file upload controls and using so much code for each and every control looks bit 
      1. You can customize user controls to reuse common user interfaces.
      2. This is the solution for your reference.
        1. CustomUploadUserControl.ascx.cs
          •     public partial class CustomUploadUserControl : System.Web.UI.UserControl
                {
                    protected void Page_Load(object sender, EventArgs e)
                    {
            
                    }
                    public void uploadBtn_Click(object sender, EventArgs e)
                    {
                        if (FileUpload.PostedFile.ContentLength > 1 * 1024 * 1024)
                        {
                            Message.Text = "File size has exceeded 1MB!";
                            Message.ForeColor = Color.Red;
                            return;
                        }
                        Message.Text = "File upload successfully!";
                        Message.ForeColor = Color.Green;
                    }
                }
        2. CustomUploadUserControl.ascx
          • <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomUploadUserControl.ascx.cs" Inherits="DailyWebformsDemo.CustomUploadUserControl" %>
            <asp:FileUpload ID="FileUpload" runat="server"/>
            <asp:Label ID="Message" runat="server"></asp:Label>
            <asp:Button ID="uploadBtn" runat="server" Text="upload" OnClick="uploadBtn_Click"/>
            <script src="../Scripts/jquery-3.4.1.min.js"></script>
            <script>
              $("#uploadBtn").click(function () {
                 if ($("#FileUpload")[0].files[0].size> (1 * 1024 * 1024)) {
                    $("#Message").css("color", "red");
                    $("#Message").html("File size has exceeded 1MB!");
                    $("#FileUpload").val("");
                    return false;
                 }
              });
            </script>
        3. Web.config
          •   <system.web>
                  <controls>
            	<add tagName="CustomUploadUserControl" tagPrefix="CustomUserControl" src="~/CustomUploadUserControl.ascx" />
            </controls> </pages> </system.web>
        4. WebForm1.aspx
          • <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DailyWebformsDemo.Test.WebForm1" %>
            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head runat="server">
                <title></title>
            </head>
            <body>
                <form id="form1" runat="server">
                    <CustomUserControl:CustomUploadUserControl runat="server" />
                </form>
            </body>
            </html>

    Here is the result(This includes a demonstration of how to create user controls.)

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 20, 2020 7:30 AM

All replies

  • User-821857111 posted

    You can use the FileReader API to get the file size before the form is submitted:

    var size = document.getElementById('myupload').files[0].size;
    Wednesday, November 11, 2020 3:03 PM
  • User1686398519 posted

    Hi maverick786us, 

    You can limit the file size at the same time on the front and back ends, so that you can still limit the file size when the js code fails.

    Here is an example, you can refer to it.

    xxx.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadFile.aspx.cs" Inherits="DailyWebFormsDemo.UploadFile" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:FileUpload ID="FileUploadBtn" runat="server"/>
            <asp:Label ID="Message" runat="server"></asp:Label>
            <asp:Button ID="uploadBtn" runat="server" Text="upload" OnClick="uploadBtn_Click"/>
        </form>
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script>
            $("#uploadBtn").click(function () {
                if ($("#FileUploadBtn")[0].files[0].size> (1 * 1024 * 1024)) {
                    $("#Message").css("color", "red");
                    $("#Message").html("File size has exceeded 1MB!");
                    $("#FileUploadBtn").val("");
                    return false;
                }
            });
        </script>
    </body>
    </html>

    xxx.aspx.cs

        public partial class UploadFile : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
            }
            public void uploadBtn_Click(object sender, EventArgs e)
            {
                if (FileUploadBtn.PostedFile.ContentLength > 1 * 1024 * 1024)
                {
                    Message.Text = "File size has exceeded 1MB!";
                    Message.ForeColor = Color.Red;
                    return;
                }
                // save files
                Message.Text = "File upload successfully!";
                Message.ForeColor = Color.Green;
            }
        }

    Here is the result.

    Best Regards,

    YihuiSun

    Thursday, November 12, 2020 3:11 AM
  • User-614943948 posted

    Thank you. 

    Is there a way I can configure it in web.config and use it for all the file upload controls? In my application there are too many file upload controls and using so much code for each and every control looks bit 

    Thursday, November 12, 2020 11:11 AM
  • User1686398519 posted

    Hi maverick786us, 

    1. Is there a way I can configure it in web.config
      1. You can add maxRequestLength in web.config like this:

        • <httpRuntime maxRequestLength="xxx"/>
    2. are too many file upload controls and using so much code for each and every control looks bit 
      1. You can customize user controls to reuse common user interfaces.
      2. This is the solution for your reference.
        1. CustomUploadUserControl.ascx.cs
          •     public partial class CustomUploadUserControl : System.Web.UI.UserControl
                {
                    protected void Page_Load(object sender, EventArgs e)
                    {
            
                    }
                    public void uploadBtn_Click(object sender, EventArgs e)
                    {
                        if (FileUpload.PostedFile.ContentLength > 1 * 1024 * 1024)
                        {
                            Message.Text = "File size has exceeded 1MB!";
                            Message.ForeColor = Color.Red;
                            return;
                        }
                        Message.Text = "File upload successfully!";
                        Message.ForeColor = Color.Green;
                    }
                }
        2. CustomUploadUserControl.ascx
          • <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomUploadUserControl.ascx.cs" Inherits="DailyWebformsDemo.CustomUploadUserControl" %>
            <asp:FileUpload ID="FileUpload" runat="server"/>
            <asp:Label ID="Message" runat="server"></asp:Label>
            <asp:Button ID="uploadBtn" runat="server" Text="upload" OnClick="uploadBtn_Click"/>
            <script src="../Scripts/jquery-3.4.1.min.js"></script>
            <script>
              $("#uploadBtn").click(function () {
                 if ($("#FileUpload")[0].files[0].size> (1 * 1024 * 1024)) {
                    $("#Message").css("color", "red");
                    $("#Message").html("File size has exceeded 1MB!");
                    $("#FileUpload").val("");
                    return false;
                 }
              });
            </script>
        3. Web.config
          •   <system.web>
                  <controls>
            	<add tagName="CustomUploadUserControl" tagPrefix="CustomUserControl" src="~/CustomUploadUserControl.ascx" />
            </controls> </pages> </system.web>
        4. WebForm1.aspx
          • <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DailyWebformsDemo.Test.WebForm1" %>
            <!DOCTYPE html>
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head runat="server">
                <title></title>
            </head>
            <body>
                <form id="form1" runat="server">
                    <CustomUserControl:CustomUploadUserControl runat="server" />
                </form>
            </body>
            </html>

    Here is the result(This includes a demonstration of how to create user controls.)

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 20, 2020 7:30 AM