File upload dialog to filter the files by type filters specified

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 11 Aug 2022 12:59 by ADMIN

Release 3.6.0 (14 Sep 2022) (R3 2022)

Kasim

Created on: 09 Mar 2021 05:16

Category: Upload

Type: Feature Request

File upload dialog to filter the files by type filters specified

<TelerikUpload SaveUrl="@SaveUrl"
                               RemoveUrl="@RemoveUrl"
                               AllowedExtensions="@( new List<string>() { ".pdf", ".docx" } )"
                               OnSelect="@OnSelectHandler"
                               OnCancel="@OnCancelHandler"
                               OnRemove="@OnRemoveHandler">
                </TelerikUpload>

When the AllowedExtensions is set for the Telerik Upload control, it is expected that the File selection dialog box should filter the files by the file types in the Allowed extensions only. However, the dialog shows all files.

------

ADMIN EDIT

This will likely be exposed via the accept attribute the <input type=file> exposes. Note that it requires MIME types, not extensions.

At the moment, the extension can be filtered only after the file is selected: https://docs.telerik.com/blazor-ui/components/upload/validation.

-----

Duplicated Items

Add the ability to control which files are selectable in the browser upload dialog

5 comments

ADMIN

Marin Bratanov

Posted on: 10 Mar 2021 08:36

Hello Kasim,

System.Web.dll is not part of .NET Core, it is part of the "full" .NET framework. This means it does not come as a dependency by default, and it is not available by default in Blazor. Moreover, it's size is over 5MB. Thus, it is not something we can add and reference either.

This type of bloat is why we can't do this out-of-the-box, but there are many tools to help an application developer with that. If you do this rarely, just copying off the needed ones from MDN is a valid approach. While I am not in a position to suggest third-party software, a quick search came up with packages like this one or this one that can also do this for you in case you need to do it all the time. You could also try using the StaticFiles features of .NET Core as shown here yet I don't think this is its intended usage, and creating a new content provider instance for checking each file name is rather expensive compared to using a lookup table through a third party nuget package. Moreover, it will probable be unavailable in WebAssembly (I have not tested it, but it is the static files provider for a server so If ind it likely that it will either not exist, or be trimmed by the linker).

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Kasim

Posted on: 10 Mar 2021 03:57

Just for a hint MimeMapping can be easily achieved using GetMimeMapping. This function gives exact Mime Mapping for most of the file types currently in use.

ADMIN

Marin Bratanov

Posted on: 09 Mar 2021 10:36

Hi Kasim,

I also think it will be nice if you could set the accept attribute, so you can click the Follow button on this page to get email notifications for status updates on this feature (such as when its release is known). This is what its current status "Unplanned" means - we see value in such a feature, we simply don't know yet when it will be implemented and exactly how.

At the risk of appearing blunt, I'd rather be up-front about this - I doubt we will add the bloat of copying over the MIME types to our assembly. In the first place, this feature is not very popular - this is the first question about it in the year we've had this component, and our WebForms suite has been working quite well for a decade without it. At the same time adding some form of automated matching and parsing will have its limitations in terms of customization options, and this is exactly a feature for customizing the component behavior. Thus, allowing the developer free reign is important.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Kasim

Posted on: 09 Mar 2021 09:58

Hi Marin,

Thanks for the links you shared, it helped me resolved my issue for now as the workaround worked as expected. However, for future issue would like this feature to be added to the control itself.

Also, the implementation should be such that developer should not worry about the actual Mime Types for the known file types as listed here. Mime types should be determined by the control itself by the specified extension.

ADMIN

Marin Bratanov

Posted on: 09 Mar 2021 09:03

Hi Kasim,

In a web app, to have the file select dialog filter the files you see, you must specify the MIME types you want to see in the accept attribute of the <input type=file> (example here). That would probably be a separate parameter on the component (I would personally name it "Accepts").

The current file type validation feature is a validation feature (more here in the docs) and not filtering feature.

So, I converted this thread to a "Feature Request" because it is not a bug.

In the meantime, the following two features (one of them has a workaround you can consider now) can let you remove such files when the user selects them, in case they get implemented sooner than this one:

Regards,
Marin Bratanov
Progress Telerik