Duplicate File Input Validation

HOW-TO

Validate duplicate file inputs in the RadUpload control client-side

SOLUTION

Duplicate file input validation may be achieved client-side by creating a javascript validating function and firing it by a custom validator.

The code snippet below and the attached page demonstrate such kind of validation - checks for files with equal names in the added input fields and in case of a name duplication it clears the first field containing a file with an already used name and sets the focus at this field. Validation passes and all browsed files are being uploaded only if all input fields contain either files with different names or are empty.

<script type="text/javascript">

function checkForDuplicateSelection(sender, args)

{

var usedField = new Array();

var radUpload = GetRadUpload('<%= RadUpload1.ClientID %>');

var fileInputs = radUpload.GetFileInputs();

var duplicateFieldFlag = false;

for(var i = 0; i < fileInputs.length; i++)

{

var fileName = fileInputs[i].value.substring(fileInputs[i].value.lastIndexOf("\\") +  1,

fileInputs[i].value.length);

for(var j = 0; j < usedField.length; j++)

{

//If at least one duplicate field exists

//the emptyFieldFlag is being raised

if(fileName == usedField[j])

{

duplicateFieldFlag = true;

//The first invalid file input

//field receives focus

radUpload.ClearFileInputAt(i);

fileInputs[i].focus();

break;

}

}

if(duplicateFieldFlag)

{

args.IsValid = false;

return;

}

if(fileInputs[i].value.length != 0)

{

usedField[usedField.length] = fileName;

}

}

args.IsValid = true;

}

</script>

<radu:radupload id="RadUpload1" runat="server" />

<asp:button id="Button1" runat="server" text="Submit" /><br/>

<asp:customvalidator runat="server" id="RadUploadDuplicateFieldsValidator"

clientvalidationfunction="checkForDuplicateSelection">

A duplicate field found!

</asp:customvalidator>

  

<script type="text/javascript">

function checkForDuplicateSelection(sender, args)

{

var usedField = new Array();

var radUpload = $find('<%= RadUpload1.ClientID %>');

var fileInputs = radUpload.getFileInputs();

var duplicateFieldFlag = false;

for(var i = 0; i < fileInputs.length; i++)

{

var fileName = fileInputs[i].value.substring(fileInputs[i].value.lastIndexOf("\\") +  1,

fileInputs[i].value.length);

for(var j = 0; j < usedField.length; j++)

{

//If at least one duplicate field exists

//the emptyFieldFlag is being raised

if(fileName == usedField[j])

{

duplicateFieldFlag = true;

//The first invalid file input

//field receives focus

radUpload.clearFileInputAt(i);

fileInputs[i].focus();

break;

}

}

if(duplicateFieldFlag)

{

args.IsValid = false;

return;

}

if(fileInputs[i].value.length != 0)

{

usedField[usedField.length] = fileName;

}

}

args.IsValid = true;

}

</script>

<asp:scriptmanager id="ScriptManager1" runat="server">

</asp:scriptmanager>

<telerik:radupload id="RadUpload1" runat="server" />

<asp:button id="Button1" runat="server" text="Submit" /><br />

<asp:customvalidator runat="server" id="RadUploadDuplicateFieldsValidator" clientvalidationfunction="checkForDuplicateSelection">

A duplicate field found!

</asp:customvalidator>