Maximum upload size

Thread is closed for posting
8 posts, 0 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 24 Nov 2011 Link to this post

    Hello,

    I'm trying to set a customvalidator for the RadUpload control in order to check the maximum upload size, but I got an error (Attached screen-shot). My code is based on http://sample.topscms.com/blog/post/1607--client-side-file-size-validation-for-telerik-upload.

    Default2.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
           <asp:ScriptManager ID="asdasD" runat="server">
           </asp:ScriptManager>
     
           <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    var currentLoadingPanel = null;
                    var currentUpdatedControl = null;
     
                    function RequestStart(sender, args) {
                        currentLoadingPanel = $find("<%= TasksRadAjaxLoadingPanel.ClientID %>");
     
                        if (args.get_eventTarget() == "<%= SubmitButton.UniqueID %>") {
                            args.set_enableAjax(false);
                        }
     
                        currentUpdatedControl = "<%= MainPanel.ClientID %>";
     
                        //show the loading panel over the updated control
                        currentLoadingPanel.show(currentUpdatedControl);
                    }
     
                    function ResponseEnd() {
                        //hide the loading panel and clean up the global variables
                        if (currentLoadingPanel != null)
                            currentLoadingPanel.hide(currentUpdatedControl);
                        currentUpdatedControl = null;
                        currentLoadingPanel = null;
                    }
     
                    function validateRadUploadFileSize(source, arguments) {
                        var totalFileSize = 0;
                        var maxFileSize = 100000;
                        var radUpload = $find('<%= AttachedFilesRadUpload.ClientID %>');
                        var fileInputs = radUpload.getFileInputs();
                        for (var i in fileInputs) {
                            if (fileInputs[i] && fileInputs[i].files[0]) {
                                totalFileSize += fileInputs[i].files[0].fileSize;
                            }
                        }
     
                        arguments.IsValid = totalFileSize <= maxFileSize;
     
                    }
                </script>
            </telerik:RadCodeBlock>
     
     
           <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="SubmitButton">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="MainPanel" LoadingPanelID="TasksRadAjaxLoadingPanel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
                <ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />
            </telerik:RadAjaxManager>
     
            <telerik:RadAjaxLoadingPanel ID="TasksRadAjaxLoadingPanel" Skin="Vista" runat="server">
            </telerik:RadAjaxLoadingPanel>
     
            <asp:Panel ID="MainPanel" Width="100%" HorizontalAlign="Left" runat="server">
     
                <telerik:RadProgressManager ID="Radprogressmanager1" Width="403px" runat="server" />
                <telerik:RadUpload ID="AttachedFilesRadUpload" InitialFileInputsCount="1" MaxFileInputsCount="10" ControlObjectsVisibility="AddButton, RemoveButtons, CheckBoxes"
                           Width="405px" runat="server" />                       
                <telerik:RadProgressArea runat="server" Width="405px" ID="ProgressArea1" ></telerik:RadProgressArea>
     
                 <asp:CustomValidator runat="server" ID="CustomValidator1" Display="Dynamic" ClientValidationFunction="validateRadUploadFileSize"
                            OnServerValidate="CustomValidator1_ServerValidate" ValidationGroup="CreateNewTaskValidationGroup">       
                            The maximum upload size is 100 KB
                 </asp:CustomValidator>
     
                 <asp:Button runat="server" ID="SubmitButton" ValidationGroup="CreateNewTaskValidationGroup" Text="Submit" />
     
             </asp:Panel>
     
        </div>
        </form>
    </body>
    </html>

    Default2.aspx.cs:

    using System;
    using System.Web.UI.WebControls;
    public partial class Default2 : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
    {
    args.IsValid = (AttachedFilesRadUpload.InvalidFiles.Count == 0);
    }
    }

    Please, I need you help in order to solve this problem.
    It is very appreciated to send me the modified code.

    Regards,
    Bader
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Nov 2011 Link to this post

    Hello Bader,

    Here is the sample code that I tried which worked as expected.
    C#:
    protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs e)
    {
        е.IsValid = (RadUpload1.InvalidFiles.Count == 0);
    }

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 27 Nov 2011 Link to this post

    Hello,

    Thank you very much for your reply,
    Your code is the same as mine (I just used "args" instead of "e"). 
    Please, Can you test my code which I posted before and tell me why It not display the validation message?

    Please, I need your help,

    Regards,
    Bader
  5. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 28 Nov 2011 Link to this post

    Hello Bader,

    The problem with your code is the client-side validation you're performing. You can't check the file size of an uploaded file in js as it's not supported. You only validate a file's size is when you use the RadProgressManager/RadProgressArea controls.

    You can check it out in this help document:

    http://www.telerik.com/help/aspnet-ajax/upload-how-to-client-file-size.html

    I hope that helps.
  6. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 28 Nov 2011 Link to this post

    Hello,

    Thank you very much for your reply,
    I checked that link before, but, since I'm using asp.net validator controls such as customvalidator..., I can't use popups (according to the requirements). I need to use customvalidator control here. Is that possible? If so, can you please provide me with a solution?

    By the way, I also tried to use a label control instead of the customvalidator control as below, but , it is not working for me (The ResultLabel doesn't display). Can you please explain to me how to fix it?

    <telerik:RadCodeBlock ID="MainRadCodeBlock" runat="server">
                <script type="text/javascript">
                    function checkUploadedFilesSize(progressArea, args) {
                        //progressArea.confirmed is a custom variable,   
                        // you can use another if you want to   
                        if (!progressArea.confirmed && args.get_progressData().RadUpload.RequestSize > 10000) {
                            document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'inherit';
                        }
                        else {
                            document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'none'; 
                        }
                    }
                </script>
            </telerik:RadCodeBlock>
     
            <asp:Panel runat="server" ID="MainPanel">
                <telerik:RadUpload runat="server" id="RadUpload1" />
                <telerik:RadProgressArea runat="server" id="RadProgressArea1"  OnClientProgressUpdating="checkUploadedFilesSize" />
                <telerik:RadProgressManager runat="server" id="RadProgressManager1" />
                <asp:Button runat="server" id="Button1" text="Upload" />
                <asp:label ID="ResultLabel" runat="server" style="display: none;"  text="The total size of the selected files is more than the limit"></asp:label>
           </asp:Panel>

    Please, I need your help,

    Regards,
    Bader
  7. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 29 Nov 2011 Link to this post

    Hello Bader,

    Try changing your code to something like this:

    <telerik:RadCodeBlock ID="MainRadCodeBlock" runat="server">
                <script type="text/javascript">
                    function checkUploadedFilesSize(progressArea, args) {
                        //progressArea.confirmed is a custom variable,    
                        // you can use another if you want to    
                        if (!progressArea.confirmed && args.get_progressData().RadUpload.RequestSize > 10000) {
                            progressArea.cancelRequest();
                            progressArea.confirmed = "confirmed";
                            document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'inline'; 
                        }
                        else {
                            document.getElementById('<%= ResultLabel.ClientID %>').style.display = 'none';  
                        }
                    }
                </script>
            </telerik:RadCodeBlock>
       
            <asp:Panel runat="server" ID="MainPanel">
                <telerik:RadUpload runat="server" id="RadUpload1" />
                <telerik:RadProgressArea runat="server" id="RadProgressArea1"  OnClientProgressUpdating="checkUploadedFilesSize" />
                <telerik:RadProgressManager runat="server" id="RadProgressManager1" />
                <asp:Button runat="server" id="Button1" text="Upload" />
                <asp:label ID="ResultLabel" runat="server" style="display: none;"  text="The total size of the selected files is more than the limit"></asp:label>
           </asp:Panel>

    I just added the two lines from the example, one to cancel the request and the other to set the confirmed variable. I also changed the display from "inherit" to "inline".

    I hope that helps.
  8. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 29 Nov 2011 Link to this post

    Hello,

    Thank you very much for you reply, I tried your code, but it is not working for me (the ResultLabel still hidden).

    Can you please check it again?

    Regards,
    Bader
  9. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 01 Dec 2011 Link to this post

    Hello Bader,

    After researching what the cancelRequest method does, it looks like your code will not work because the cancelRequest method cancels the current request by refreshing the page (You might notice that it reloads the page with a query string like "RadUrid=123456789").

    This is the reason the label will not show.

    You can see the definition here: http://www.telerik.com/help/aspnet-ajax/upload-client-side-radprogressarea.html

    I would suggest using the RadAsyncUpload control instead as it uploads the file asynchronously, so you should be able to show a message using that control.

    I hope that helps.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017