Change AllowedFileExtensions and Check Uploaded Files
How to
Change the allowed file extensions of RadAsyncUpload dynamically.
The potential issue from UX perspective is that if the user had uploaded a valid file that is now invalid, they will not get a notification out of the box, the file will simply not get uploaded to the target folder and the FileUploaded event will not fire for it.
Solution
When you change the AllowedFileExtensions on the server, you can also call a JS function that will traverse the current files and invalidate them. This will also allow you to notify the user that they need to re-upload something.
Here follows a small example of such a scenario. The key points have comments.
<ol>
<li>select a PDF in the async upload</li>
<li>change the dropdown selection so that it allows PNGs</li>
<li>optionally, upload a PNG and save it</li>
</ol>
<asp:UpdatePanel ID="upDocuments" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<telerik:RadAsyncUpload ID="radUp" runat="server" HideFileInput="true"
InputSize="55" MaxFileInputsCount="1" MultipleFileSelection="Disabled"
PostbackTriggers="btnSave"
AllowedFileExtensions=".pdf"
OnFileUploaded="radUp_FileUploaded" />
<asp:DropDownList runat="server" ID="ddlFileType" AutoPostBack="true" OnSelectedIndexChanged="ddlFileType_SelectedIndexChanged">
<asp:ListItem Text="PDF" Selected="True" />
<asp:ListItem Text="PNG" />
</asp:DropDownList>
<asp:Button Text="Save" ID="btnSave" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<script>
function invalidateUploadedFiles() {
var upload = $find("<%= radUp.ClientID %>");
var inputs = upload.getUploadedFiles();
//loop through current uploaded files
for (i = inputs.length - 1; i >= 0; i--) {
//check if the extension is valid
if (!upload.isExtensionValid(inputs[i])) {
//notify the user
alert("extension is invalid for file: " + inputs[i] + "\nPlease upload a " + upload.get_allowedFileExtensions())
//remove the invalid file
upload.deleteFileInputAt(i);
}
}
//without this, the handler will execute after every partial postback which you may or may not want
Sys.Application.remove_load(invalidateUploadedFiles);
}
</script>
protected void ddlFileType_SelectedIndexChanged(object sender, EventArgs e)
{
//change allowed extensions
radUp.AllowedFileExtensions = new string[] { (sender as DropDownList).SelectedItem.Text };
//call client-side validation to check for the current files
string script = "Sys.Application.add_load(invalidateUploadedFiles);";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "someKey", script, true);
}
protected void radUp_FileUploaded(object sender, FileUploadedEventArgs e)
{
//work with the uploaded file
//make sure to validate files even after client-side validation
}