How to add required validator to ajax AsyncFileUpload? - ajax

Question

How to add client side required validator to asyncfileupload ,to enforce user to select file before submitting the page.

Answer 1

You could also set the text of a the hidden textbox in a server side method using C# or VB, rather than a client side Javascript or JQuery function.
protected void afu_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
afu.SaveAs(Server.MapPath("Uploads\\") + e.FileName);
txt.Text = e.FileName;
}

Answer 2

I use a RequiredFieldValidator that validates an invisible TextBox. The TextBox is filled with an arbitrary text in the OnClientUploadComplete function.
The only thing you cannot is setting the focus when it is validated.
The example uses jQuery.
<ajaxToolkit:AsyncFileUpload runat="server" ID="afu" ClientIDMode="AutoID" UploaderStyle="Traditional" OnClientUploadComplete="asyncUploadComplete" OnClientUploadStarted="asyncUploadStarted" />
<asp:RequiredFieldValidator runat="server" ID="rfv" ControlToValidate="txt" Text="The file is required!" SetFocusOnError="false" />
<asp:TextBox runat="server" ID="txt" style="display:none" MaxLength="0" />
<script type="text/javascript">
// AsyncFileUpload - OnClientUploadComplete
function asyncUploadComplete(sender, args) {
// Assemble info of uploaded file
var contentType = args.get_contentType();
var info = args.get_length() + " bytes";
if (contentType.length > 0) {
info += " - " + contentType;
}
info += " - " + args.get_fileName();
// Put info in the first input field after the AsyncFileUpload control
var source = $(sender.get_element());
source.nextAll('input').val(info);
// Validate immediately
ValidatorEnable(source.nextAll('span')[0], true);
}
// AsyncFileUpload - OnClientUploadStarted
function asyncUploadStarted(sender, args) {
// Clear the first input field after the AsyncFileUpload control
var source = $(sender.get_element());
source.nextAll('input').val('');
}
</script>