AsyncUpload Validation

[Silviu]

I am trying to get some validation done. When a user selects the wrong file type I can see the red dot beside the file but when I click submit the postback happens anyway regardless if the file is an Xlsx or not.

I would like to display an error message without postback as the asp.net built in validation can do.

 See below for test code:

 <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" AllowedFileExtensions="Xlsx" MultipleFileSelection="Disabled" ValidateRequestMode="Enabled" ValidationGroup="TEST" MaxFileInputsCount="1">
</telerik:RadAsyncUpload>
<telerik:RadButton ID="RadButton1" runat="server" Text="Submit" ValidationGroup="TEST" OnClick="RadButton1_Click"></telerik:RadButton>
<asp:ValidationSummary runat="server" DisplayMode="BulletList" ShowSummary="true" ShowValidationErrors="true" ShowMessageBox="true" ValidationGroup="TEST" />

 

[Silviu]

Forgot to mention that even though I have selected .XLSX as the only allowed types, in the File Explorer pop up it is still set to All Files (*.*). It does turn red if other than xlsx file type is selected but I want to restrict the selection also.

[Ivan Danchev]

Hello Silviu,

You can prevent the postback by subscribing to the RadAsyncUpload's OnClientValidationFailed event and the RadButton's OnClientClicking and cancelling the Button's click event if the validation has failed:

var pageIsValid = true;

function OnClientValidationFailed(sender, args) {
    pageIsValid = false;
}

function OnClientClicking(sender, args) {
    if (!pageIsValid) {
        alert("Invalid file format!");
        args.set_cancel(true);
    }
}

As for showing only .xlsx files in the select dialog window, you can achieve that by setting the accept attribute to the AsyncUpload's input element as shown below:

function pageLoad() {
    $telerik.$(".RadAsyncUpload input").attr("accept", ".xlsx");
}

Regards,
Ivan Danchev
Telerik

[Silviu]

Thank you, I can see Xlsx as part of the option list.

But I still have options of All Files, Pictures and HTML alongside the Xlsx.

I need for xlsx to be the only allowed option.

How would I set that?

[Ivan Danchev]

Hello Silviu,

You will not be able to hide the other options, because this is browser-specific behavior which we do not have control over, regardless of using the AsyncUpload or the <input type="file" /> HTML element. The filtering of the files through the "accept" attribute is added for convenience, not to limit the users preventing them from selecting other file types.

Regards,
Ivan Danchev
Telerik

[Silviu]

Ok thank you for clearing that up.

It is not a deal breaker so not a problem.