How can I restrict the types of files a user can select when using the GridAttachmentColumn in a RADGrid control?

[Brandon]

Within a page, I have the following - 

<telerik:RadGrid ...

     <telerik:GridAttachmentColumn ... AllowedFileExtensions=".png,.gif,.jpg,.jpeg" ... />

</ telerik:RadGrid>

When editing an item within the grid, and clicking the 'Select' option on the grid's edit column related to the GridAttachmentColumn, I'm receiving this popup - 

 

I want to restrict the files a user can select to upload through this dialog to those defined within the 'AllowedFileExtensions' property of the control, either from within the HTML, or in the code behind.

How can I go about doing that? If this is not the correct place to be asking this question, where on the forum should I be asking this question?

Thanks.

[Attila Antal]

Hello Brandon,

This is called file filtering and it needs to be configured in the RadAsyncUpload control. For the standalone RadAsyncUpload, you can find the instruction in the RadAsyncUpload File Filtering article.

The GridAttachmentColumn of RadGrid uses two Upload Control types. One of which is the RadUpload and the other is the RadAsyncUpload. You can access this upload control in the backend and configure it accordingly.

 

First, you will need to make sure that AsyncUpload is used as the UploadControlType and the column has a UniqueName.

<telerik:GridAttachmentColumn UniqueName="UploadColumn" UploadControlType="RadAsyncUpload" AllowedFileExtensions="jpeg,jpg,gif">
</telerik:GridAttachmentColumn>

 

In the ItemDataBound event of the Grid, you can access this Control when the Grid is in edit mode.

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item.IsInEditMode)
    {
        GridEditableItem editItem = (GridEditableItem)e.Item;

        RadAsyncUpload uploadControl = editItem["UploadColumn"].Controls[0] as RadAsyncUpload;

        // Attach the ClientAdded client-side event
        uploadControl.OnClientAdded = "OnClientAdded";
    }
}

 

When the event triggers, access the input element by its class name and set the "accept" rule accordingly.

Example

<script>
    function OnClientAdded(sender, args) {
        $telerik.$(args.get_row()).find(".ruFileInput").attr("accept", "image/*");
    }
</script>

 

Result

 

In the following StackOverflow article, you can find more examples of the "accept" rule: HTML Input="file" Accept Attribute File Type (CSV)

 

Regards,
Attila Antal
Progress Telerik