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