This is a migrated thread and some comments may be shown as answers.

Get file size client side

1 Answer 229 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 2
Matthew asked on 03 Jan 2011, 07:53 PM
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.

1 Answer, 1 is accepted

Sort by
0
Matthew
Top achievements
Rank 2
answered on 04 Jan 2011, 09:42 PM
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.
Tags
AsyncUpload
Asked by
Matthew
Top achievements
Rank 2
Answers by
Matthew
Top achievements
Rank 2
Share this question
or