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.
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.