Get file size client side

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

    Posted 03 Jan 2011 Link to this post

    Hi,
    I have been trolling through the forums and documentation for the AsyncUpload control and I was trying to find out if there is a method or property available client-side that would let me get the size of the file uploaded. It could be either before or after the file is uploaded, although I would prefer before. I was trying to use the following - 
    sender._uploadedFiles[0].fileInfo.ContentLength
    But that only works on smaller files. If I upload a 5mb file the content length is only around 500,000 or so, and on a 3mb file it is 1,800,000. I would have thought something like InputStream.Length would be available client side???

    Thanks

    Matt.
  2. Matthew
    Matthew avatar
    9 posts
    Member since:
    Dec 2010

    Posted 04 Jan 2011 Link to this post

    I created a solution for my problem..

    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.
Back to Top