File uploading with Client Side Validation:
Client Side validation , its a problem that faced me in one of the projects im working on …
the problem was that , i want to make a file uploader that uploads images only…
and i have found the solution in one of the best books i ve read , which is { asp.net unleashed } and the solution indirectly , is to use custom validator…
so at first we will talk in brief about custom validators…
custom validator:
custom validator is an asp.net validation user control that allows the user to write his own code that he wants to apply as validation …
the custom validator is used when there is no one of the validators performs the validation that you need , as in my case of the file uploader…
the custom validator has 3 main properties and one important event:
the 3 properties are:
1. ControlToValidate;
this property takes the ID of the control you wanna apply the validation on it.
2. Text;
this property takes the text you wanna show when the validation fails…
3. ClientValidationFunction;
this property we will talk about it laterly on ,but now , it takes the client side validation function…
and the important event we will talk about is:
ServerValidate;
this function we write in it the server side code that performs the custom validation code…
now we are ready to talk about the solution of the problem …
by showing the properties of the custom validator control we can show all the events it consists , by double click on the ServerValidate event we will have the following function written in our code:
protected void CustomValidator2_ServerValidate(object source, ServerValidateEventArgs args)
{
}
this function we will use to write in our code .
Note: the args object is an object that contains our control that we will make validation on ..
args contains 2 important properties:
1.Value;
which contains the value of the control …
2. IsValid;
this property we will set it by boolean values , true or false , indicating where the validation passes which is = true , or if it fails we will set it = false…
the function that validates the uploader to upload images only is:
protected void CustomValidator2_ServerValidate(object source, ServerValidateEventArgs args)
{
string g = args.Value;
string h = g.Substring(g.IndexOf(“.”));
if (h == “.jpg” || h == “.gif” || h ==”.bmp” || h == “.png”)
{
args.IsValid = true;
}
else
args.IsValid = false;
}
this function will be activated only @ server side , which means that the validation wont occur unless postback is done….
but this solution isnt enough to have a user friendly validator , as all the validators works normally without posting back , just after editing the control…
to overcome this problem we will need to write some javascript that occurs at the client browsers ( client side ) and by having the server and the client side we can say that we have a good validation control…
then we will have a javascript function that is very similar to the previous function :
function customValidator2_ServerValidate(source,args)
{
var g = args.Value;
var h = g.substring(g.indexOf(“.”));
if (h == “.jpg” || h == “.gif” || h ==”.bmp” || h == “.png”)
{
args.IsValid = true;
}
else
args.IsValid = false;
}
both functions gets the extension of the file and compares it with the extensions we would like to validate…
then at the custom validator control add this property :
ClientValidationFunction and makes it equal the javascript function name.
as :
ClientValidationFunction=”customValidator2_ServerValidate”
ControlToValidate=”FileUpload1″ ErrorMessage=”CustomValidator”
onservervalidate=”CustomValidator2_ServerValidate”
by this we have a good and user friendly custom control that works on client and server side
DpTechyTalks 