Client-Side file size validation in RadAsyncUpload

13 posts, 0 answers
  1. Matthew
    Matthew avatar
    9 posts
    Member since:
    Dec 2010

    Posted 04 Jan 2011 Link to this post

    Requirements

    RadControls Q3 2010 SP1

    .NET 4.0

    Visual Studio 2010

    programming c#, Javascript

    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    Aim: To gain some kind of client side validation to restrict users from adding more than a pre-determined limit of files based upon total size of all uploaded files, not just each file or number of files...

    Add the following to an ASP.NET page.

    <table>
                    <tr>
                        <td colspan="2">You may attach up to 20mb in files to the Email.</td>
                    </tr>
                         <tr>
                            <td>Select File(s):</td>
                            <td>
                               <telerik:RadAsyncUpload ID="RadAsyncUpload1"
                               OnClientFileSelected="OnFileSelected"
                               OnClientFileUploadFailed="OnFileUploadFailed"
                               OnClientFilesUploaded="OnFilesUploaded"
                               OnClientProgressUpdating="OnProgressUpdating"
                               OnClientFileUploaded="OnFileUploaded"
                               OnClientFileUploadRemoved="OnFileUploadRemoved"
                               runat="server">
                               </telerik:RadAsyncUpload>
                             </td>
                        </tr>
                    </table>


    Then I linked the following external javascript file (You could also add in the head section of your page in a <script> block.

    var uploadsInProgress = 0;
    var MAX_TOTAL_BYTES = 20971520;
    var filesSize = new Array();
    var OVERSIZE_MESSAGE = "You are only allowed to add up to 20mb of files total";
    var isDuplicateFile = false;
     
    function OnFileSelected(sender, args) {
     
        for (var fileindex in sender._uploadedFiles) {
            if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {
                isDuplicateFile = true;
            }
        }
        if (!uploadsInProgress) {
            $("input[id$=btnSave]").attr("disabled", "disabled");
            
        }
        uploadsInProgress++;
    }
     
    function OnFilesUploaded(sender, args) {
        if (sender._uploadedFiles.length == 0) {
            filesSize = new Array();
            uploadsInProgress = 0;
            $("input[id$=btnSave]").removeAttr("disabled");
        }
        if (uploadsInProgress > 0) {
            DecrementUploadsInProgress();
        }
         
    }
     
    function OnProgressUpdating(sender, args) {
         
            filesSize[args.get_data().fileName] = args.get_data().fileSize;
         
    }
     
    function OnFileUploadFailed(sender, args) {
        DecrementUploadsInProgress();
    }
     
    function OnFileUploaded(sender, args) {
        DecrementUploadsInProgress();
        var totalBytes = 0;
        var numberOfFiles = sender._uploadedFiles.length;
         
            if (isDuplicateFile) {
                sender.deleteFileInputAt(numberOfFiles - 1);
                isDuplicateFile = false;
                sender.updateClientState();
                alert("You can't add the same file twice");
                return;
            }
         
        for (var index in filesSize) {
            totalBytes += filesSize[index];
        }
        if (totalBytes > MAX_TOTAL_BYTES) {
            sender.deleteFileInputAt(numberOfFiles - 1);
            sender.updateClientState();
            alert(OVERSIZE_MESSAGE);
        }
    }
     
    function OnFileUploadRemoved(sender, args) {
        if (args.get_fileName() != null) {
            if (!isDuplicateFile) {
                delete filesSize[args.get_fileName()];
            }
        }
    }
     
    function DecrementUploadsInProgress() {
        uploadsInProgress--;
        if (!uploadsInProgress) {
            $("input[id$=btnSave]").removeAttr("disabled");
             
        }
    }


    Unfortunately the file seems to need to be uploaded for this to work. I tried to get it to fire the cancelUpload() in the OnFileSelected, but it is not a valid method... Any thoughts, suggestions or improvements are more than welcome.

    P.S. I have only tested this with single file selection as it is what I needed for my project. I have no idea if all the same logic will work for multi-selection.
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 07 Jan 2011 Link to this post

    Hello Matthew,

    Thank you for providing the code library. We have updated your telerik points as a token of gratitude for your involvement.

    Regards,
    Genady Sergeev
    the Telerik team
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  3. Bing Yang
    Bing Yang avatar
    16 posts
    Member since:
    Mar 2009

    Posted 17 Jun 2011 Link to this post

    Hi Sir:/Madam:

    I have the same question: the file seems to need to be uploaded for this to work.

    Is there a way to get file size before uploading the file.

    Thanks
    Bing Yang
  4. Raji
    Raji avatar
    56 posts
    Member since:
    Jul 2011

    Posted 03 Dec 2012 Link to this post

    Hi

    I would like to check for the file size, file name length, and file type on client side when a file is selected for upload and then dipaly a custom error message for each validation failure. I am using OnClientValidationFailed method as show in the demo example. How do I check for file size, file name length, file type on the cleint side script. Let me know if more infor is needed.


    Thanks,
    Raji
  5. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 06 Dec 2012 Link to this post

    Hello Raji,

     
    You can refer to the OnClientValidationFailed documentation article where is explained how to differentiate if the validation is triggered by the size or the extension.

    As for the file name length you can check it in every client side event here the get_fileName
     is available as it is done in onClientFileSelected here:

    function OnClientFileSelected(sender, args) {
     
                   alert(args.get_fileName().length);
               }

    Hope this will be helpful. 

    Greetings,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Raji
    Raji avatar
    56 posts
    Member since:
    Jul 2011

    Posted 06 Dec 2012 Link to this post

    Hi Plamen,

    Thanks for the link.
    Can I get the file size information on OnClientValidationFailed event?  Is it possible to get hold of the validation failed error message in OnClientValidationFailed event?

    Thanks,
    Raji
  7. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 11 Dec 2012 Link to this post

    Hi Raji,

     
    Unfortunately the size of the uploaded file can not be reached in the OnClientValidationFailed event.

    As for the validation failed message would you please elaborate a little bit what exactly are you trying to achieve so we could be more helpful.

    Kind regards,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Raji
    Raji avatar
    56 posts
    Member since:
    Jul 2011

    Posted 11 Dec 2012 Link to this post

    Hi,

    When a big size file or invalid mimetype document is uploaded, the validation fails and you get a red indicator next to the file. I would like to show the user what failed exactly. Is it the file size or wrong mimetype? What I meant by error message was that when this validation fails can I get hold of the message that is returned. Let me know if this is not clear.

    Thanks,
    Raji
  9. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 14 Dec 2012 Link to this post

    Hi Raji,

     
    This behavior is not supported in the current implementation of the OnClientValidationFailed event in RadAsyncUpload,it is only notifying for the validation- please excuse us for this limitation of our control.

    One possible way to get the size of the uploaded file is possible only in case of FileApi  upload module as in the ode below:

    function OnClientValidationFailed(sender, args) {
                var jQueryRowObject = $telerik.$(args.get_row());
                alert(jQueryRowObject.find("input")[0].files[0].size);
            }

    In the other upload modules it can not be achieved.

    Hope this will explain the issue and be helpful.. 

    All the best,
    Plamen
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Sunil
    Sunil avatar
    1 posts
    Member since:
    Sep 2014

    Posted 24 Sep 2014 in reply to Matthew Link to this post

    Hi Matthew,

    This code is not working on IE8. Although I have customized it. Hence it is working fine on all browser. Below are my code.

    var uploadsInProgress = 0;
        var MAX_TOTAL_BYTES = 12582912;
        var filesSize = new Array();
        var OVERSIZE_MESSAGE = "You are only allowed to add up to 12mb of files total";
        var isDuplicateFile = false;
        function submitPage() {
            var uploadingRows = $(".RadAsyncUpload").find(".ruUploadProgress");
            for (var i = 0; i < uploadingRows.length; i++) {
                if (!$(uploadingRows[i]).hasClass("ruUploadCancelled") && !$(uploadingRows[i]).hasClass("ruUploadFailure") && !$(uploadingRows[i]).hasClass("ruUploadSuccess")) {
                    alert("you could not submit the page during upload :)");
                    return false;
                }
            }
            return true;
        }
        function OnFileSelected(sender, args) {
            for (var fileindex in sender._uploadedFiles) {
                if (typeof(sender._uploadedFiles[fileindex].fileInfo) != 'undefined') {                
                                if (sender._uploadedFiles[fileindex].fileInfo.FileName == args.get_fileName()) {
                                    isDuplicateFile = true;
                                }
                }
            }
            uploadsInProgress++;
        }

        function OnFilesUploaded(sender, args) {
            if (sender._uploadedFiles.length == 0) {
                filesSize = new Array();
                uploadsInProgress = 0;
            }
            if (uploadsInProgress > 0) {
                DecrementUploadsInProgress();
            }
        }

        function OnProgressUpdating(sender, args) {
            filesSize[args.get_data().fileName] = args.get_data().fileSize;
        }

        function OnFileUploadFailed(sender, args) {
            DecrementUploadsInProgress();
        }

        function OnFileUploaded(sender, args) {
            DecrementUploadsInProgress();
            var totalBytes = 0;
            var numberOfFiles = sender._uploadedFiles.length;

            if (isDuplicateFile) {
                sender.deleteFileInputAt(numberOfFiles - 1);
                isDuplicateFile = false;
                sender.updateClientState();
                alert("You can't add the same file twice");
                return;
            }

            for (var index in filesSize) {
                if (!isNaN(filesSize[index])) {
                    totalBytes += filesSize[index];
                }
            }
            if (totalBytes > MAX_TOTAL_BYTES) {
                sender.deleteFileInputAt(numberOfFiles - 1);
                sender.updateClientState();
                alert(OVERSIZE_MESSAGE);
            }
        }
        function OnFileUploadRemoved(sender, args) {
            if (args.get_fileName() != null) {
                if (!isDuplicateFile) {
                    delete filesSize[args.get_fileName()];
                }
            }
        }

        function DecrementUploadsInProgress() {
            uploadsInProgress--;
        }
  11. Kunal
    Kunal avatar
    6 posts
    Member since:
    Aug 2014

    Posted 07 May 2015 Link to this post

    Hi ,

    I am not able to upload any file which has filename length > 192 char .
    I am trying to upload file which has file name-

    "Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.docx"

    but its not getting uploaded , Does any one facing the same issue ?

  12. Kunal
    Kunal avatar
    6 posts
    Member since:
    Aug 2014

    Posted 07 May 2015 Link to this post

    Hi ,

    I am not able to upload any file which has filename length > 192 char .
    I am trying to upload file which has file name-

    "Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.docx"

    but its not getting uploaded , Does any one facing the same issue ?

  13. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 11 May 2015 Link to this post

    Hello Kunal,

    We are not aware of such limitation of the control but the issue is most probably caused by limitation of the OS used as for example it is with described in this article for windows.

    Regards,
    Plamen
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
Back to Top