Client side validation of file size

Thread is closed for posting
3 posts, 0 answers
  1. Damodaran Mahadevan
    Damodaran Mahadevan avatar
    6 posts
    Member since:
    Jul 2009

    Posted 26 Aug 2010 Link to this post


    I have a requirement of validating the file size in the client side. I went through the Telerik documentation, i got to know that i need to add
        <telerik:RadProgressManager runat="server" id="RadProgressManager1" />
                <telerik:RadProgressArea runat="server" id="RadProgressArea1"
                 OnClientProgressUpdating ="CheckUploadedFilesSize" DisplayCancelButton="True"/>

    in addition to the radupload control.

    I have included the javascript as below as well for validating the file size:
     function CheckUploadedFilesSize(progressArea, args) {
                    //progressArea.Confirmed is a custom variable,
                    // you can use another if you want to
                    if (!progressArea.Confirmed && args.ProgressData.RadUpload.RequestSize > 1000000) {
                        if (confirm("The total size of the selected files is more than the limit." +
         " Do you want to cancel the upload?")) {
                        else {
                            progressArea.Confirmed = "confirmed";

    I modified the web.config to accommodate the RadProgressManager  and RadProgressArea as per the documentation.

    Strangely the RadProgressManager  is not getting displayed. The javascript is also not getting triggered. I am checking with a larger file size as i am aware that i wont be able to see the RadProgressManager  for smaller ones.

    Please let me know if i am missing something?

  2. Umer Khalid Butt
    Umer Khalid Butt avatar
    3 posts
    Member since:
    Dec 2011

    Posted 28 Dec 2011 Link to this post

    Well Damodaran Mahadevan I think its too late to reply :p
    but I think it might help someone else (like me). I was facing a similar problem but my case was a bit severe.

    I was trying to check the size of file which is to be uploaded using RadUpload on client side using JavaScript. After googling a lot I found that it is not supported by RadUpload and there were some solutions but they were either flash based / works only for some particular browser.

    Finally I came up with a solution with a little tweaking of scripting. The following code explains the rest of the story :)

    function checkFileSizeFF(radUpload, eventArgs) {
                 var rows = radUpload.getFileInputs();
                 if (rows.length >= 1) {
                     var recentlyAddedFile = rows[rows.length - 1].files[0];
                     if (recentlyAddedFile.fileSize > 5024 * 1024) {
                         alert("File size cannot be greater than 5MB")
                         radUpload.clearFileInputAt(rows.length - 1);
             function checkFileSizeIE(radUpload, eventArgs) {
                 var rows = radUpload.getFileInputs();
                 if (rows.length >= 1) {
                     var myFSO = new ActiveXObject("Scripting.FileSystemObject");
                     var filePath = eventArgs._fileInputField.title;
                     var thefile = myFSO.getFile(filePath);
                     var size = thefile.size;
                     if (size > 5024 * 1024) {
                         alert("File size cannot be greater than 5MB")
                         radUpload.clearFileInputAt(rows.length - 1);
             function checkFileSize(radUpload, eventArgs) {
                 if (navigator.appName == "Netscape") {
                     checkFileSizeFF(radUpload, eventArgs)
                 if (navigator.appName == "Microsoft Internet Explorer") {
                     checkFileSizeIE(radUpload, eventArgs)
    <telerik:RadUpload ID="rdUploadMaterials" runat="server" InitialFileInputsCount="1"
                                                                MaxFileInputsCount="5" AllowedFileExtensions=".doc,.docx,.pdf,.xls,.xlsx,.ppt,.txt,.rtf,.jpg,.jpeg,.png,.gif,.pps,.pptx"
                                                                Localization-Remove="" Localization-Select="Browse" MaxFileSize="5242880" ReadOnlyFileInputs="True" Width="340px"
                                                                OnClientFileSelected ="checkFileSize"  />

    I have tested this code in FF/IE/Chrome. Hope it will help someone :)

  3. Ssv
    Ssv avatar
    1 posts
    Member since:
    Jul 2012

    Posted 14 May 2012 Link to this post

    Here in case of RadUpload we can use RadAsynchronousUpload to get the client side validation of file size. The following link may be helpful for this case please check it once.

Back to Top