Note: For jQuery lovers I have created a plugin to do the job, you can refer the following article for more details
In this article I am explaining how to validate the ASP.Net AJAX Control Toolkit AsyncFileUpload control. By default this control does not have any validation property and also you cannot use ASP.Net Validators with this control.
There are articles on internet who validate after the file is uploaded on the OnClientUploadComplete event, which to me does not make sense as what’s the use of validating once file is already saved on server. If it is a virus or some malicious program it will do its job.
Hence I came up with the following solution and it is actually a hack to make the ASP.Net AJAX Control Toolkit AsyncFileUpload control actually validate the file before uploading. Don’t worry you will not need to do anything you just need to copy the script and use it with minimal changes
HTML Markup
Below is the HTML markup which has nothing but an AsyncFileUpload control, a Throbber and a label to display the validation messages
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc1:AsyncFileUpload runat="server" ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" CompleteBackColor="White" UploadingBackColor="#CCFFFF" ThrobberID="imgLoader" OnUploadedComplete="FileUploadComplete" />
<asp:Image ID="imgLoader" runat="server" ImageUrl="~/images/loader.gif" />
<br />
<asp:Label ID="lblMesg" runat="server" style = "color:red" Text = "Upload a valid file with extension doc, docx." />
</form>
Client Side File Extension Validation script
Below is the script that you need to paste in the head section of the page or master page or on the Content Page within SCRIPT tags
<script type="text/javascript">
var errorMessage;
window.onload = function () {
errorMessage = $get("<%=lblMesg.ClientID %>").innerHTML;
$get("<%=lblMesg.ClientID %>").innerHTML = "";
AjaxControlToolkit.AsyncFileUpload.prototype._onStart = function () {
var valid = this.raiseUploadStarted(new AjaxControlToolkit.AsyncFileUploadEventArgs(this._inputFile.value, null, null, null));
if (typeof valid == 'undefined') {
valid = true;
}
if (valid) {
valid = Validate(this._inputFile.value);
if (!valid) {
this._innerTB.value = "";
this._innerTB.style.backgroundColor = this._completeBackColor;
}
}
return valid;
}
}
var validFilesTypes = ["doc", "docx"];
function Validate(path) {
$get("<%=lblMesg.ClientID%>").innerHTML = "";
var ext = path.substring(path.lastIndexOf(".") + 1, path.length).toLowerCase();
var isValidFile = false;
for (var i = 0; i < validFilesTypes.length; i++) {
if (ext == validFilesTypes[i]) {
isValidFile = true;
break;
}
}
if (!isValidFile) {
$get("<%=lblMesg.ClientID %>").innerHTML = errorMessage;
}
return isValidFile;
}
</script>
The extensions you want to allow you can specify in the validFilesTypes array separated by comma.
That’s all you need to do to enable validation for ASP.Net AJAX Control Toolkit AsyncFileUpload control.
Demonstration
Downloads
You can download the complete source code using the download links provided below
ValidationInAsyncFileUpload.zip