This is a migrated thread and some comments may be shown as answers.

File Filter Doesn't Work

8 Answers 444 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Vinod
Top achievements
Rank 1
Vinod asked on 23 Jul 2013, 11:03 AM
Hi,
I need to filter the files displayed in the browse dialogue window based on file types. I am using RadAsyncUpload control to
accomplish this.
  • When I browse in FF, I can see two browse button displayed. Clicking on first browse button doesn't open dialogue with file lists. Attached the image. I want a simple file upload control with single browse button. I had a similar issue in IE but resolved by adding the following. But  issue still persists in FF.
    <TeleControl:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1"> </TeleControl:RadStyleSheetManager>
                                    
  • When I browse with applying file filter for Image files(jpg,png), It shows all files in the open dialogue window instead of showing only those files with extension .jpg or .png. Attached the screen shot. But when I refresh the page it works fine. 
  • Can you please explain how does this file filter works in RadAsyncUpload w.r.t browsers. As far as I know, It depends on upload module. IE prefers silver light first where as FF prefers flash. Is that possible to make filters work in IE with having only flash (not silverlight)?. In which scenario does this combination (IE or FireFox with only flash) fails?.

Please find the aspx code:
 
<TeleControl:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1"></TeleControl:RadStyleSheetManager>

<TeleControl:RadAsyncUpload ID="RadAsyncUpload1" runat="server">
<Localization Select="Browse" />
</TeleControl:RadAsyncUpload>

C# (asp.net page behind):
protected void Page_Load(object sender, EventArgs e)
 {
       var filter = new FileFilter();
        filter.Description = "Image files(jpg,png)";
        filter.Extensions = new string[2];
        filter.Extensions[0] = "jpg";
        filter.Extensions[1] = "png";
        RadAsyncUpload1.FileFilters.Add(filter);
}


8 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 23 Jul 2013, 12:07 PM
Hi Vinod,

RadAsyncUpload uses Upload Modules for different browsers. For Internet Explorer it uses Silverlight which allows to display the filter extensions in Open Dialog Window. For other modules that support rest of the browsers filter is working but it is not displayed in the Open Dialog Window as modules don't support it. Here is the help topic where this issue is explained.

Thanks,
Princy.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 09 Apr 2020, 02:44 PM

How do i isolate csv and dbf files?

I tried everything i could think of. For example:

 <telerik:RadAsyncUpload id="upFirstYear_Baseline" runat="server" RenderMode="Lightweight" 
                                                      UploadedFilesRendering="AboveFileInput" width="300px"
                                                      Localization-Select="Browse" MaxFileInputsCount="1"
                                                      AllowedFileExtensions="csv,dbf"
                                                      data-clientFilter="Microsoft Excel Comma Separated Values File/csv, data/dbf"
                                                      OnClientAdded="OnClientAdded"
                                                      AutoAddFileInputs="true">
                                       </telerik:RadAsyncUpload> 

Allen
Top achievements
Rank 2
Iron
Veteran
commented on 02 Oct 2021, 05:56 PM

As an aside, there seems to be quite a buzz about the exact mime type to use for csv.... like here:

https://datatracker.ietf.org/doc/html/rfc7111

and here, where there are concerns about security

https://owasp.org/www-community/attacks/CSV_Injection

There is also this mime type

application/vnd.ms-excel

and these woes:

https://stackoverflow.com/questions/13725795/mime-type-content-type-for-opening-csv-files-using-excel-in-ie-firefox

 

It seems there are concerns about sending csv as anything other than plain text.

 

 

 

 

0
Peter Milchev
Telerik team
answered on 13 Apr 2020, 01:17 PM

Hello David,

You can just set the AllowedFileExtensions to show the desired extensions with a dot in front of then and then in the OnClientAdded event to set the accept attribute to the result of the sender.get_allowedFileExtensions() method:

<telerik:RadAsyncUpload ID="upFirstYear_Baseline" runat="server" RenderMode="Lightweight"
    UploadedFilesRendering="AboveFileInput" Width="300px"
    Localization-Select="Browse" MaxFileInputsCount="1"
    AllowedFileExtensions=".csv,.dbf"
    OnClientAdded="OnClientAdded"
    AutoAddFileInputs="true">
</telerik:RadAsyncUpload>
<script>
    function OnClientAdded(sender, args) {
        $telerik.$(args.get_row()).find(".ruFileInput").attr("accept", sender.get_allowedFileExtensions());
    }
</script>

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Allen
Top achievements
Rank 2
Iron
Veteran
commented on 01 Oct 2021, 11:50 AM

Hello Peter:

If the user wants to use full mime types instead of just the extensions, for example,

for an xlsx file: mimetype is "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

the documentation elsewhere says set data-clientFilter to "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" for these.

Is there a way to set this property (attribute) from javascript if I have the mime types determined elsewhere?

For Example:

(C# property)

AllowedMimeTypes="application/pdf, image/png, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";

what is the syntax to grab this and update data-clientFilter?  

$telerik.$(args.get_row()).find(".ruFileInput").attr("accept", '<%= AllowedMimeTypes %>');

Peter Milchev
Telerik team
commented on 01 Oct 2021, 12:29 PM

Hi Allen, the data-clientFilter is a completely custom Attribute set to the control, so you can set it even from the server-side:

RadAsyncUpload1.Attributes.Add("data-clientFilters", "application/pdf, image/png, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

Allen
Top achievements
Rank 2
Iron
Veteran
commented on 01 Oct 2021, 04:46 PM | edited

OK, should the Javascript alternative also work?  And will setting this as shown constrain the browse files dialog as expected?
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 13 Apr 2020, 01:35 PM

Hi Peter,

  I still see files with "wrong" extension in "Browse" window.

  In following example i can see only image files. Trying to achieve the same for .csv and .dbf.

  <telerik:RadAsyncUpload id="upFirstYear_Baseline" runat="server" RenderMode="Lightweight" 
                                                      UploadedFilesRendering="AboveFileInput" width="300px"
                                                      Localization-Select="Browse" MaxFileInputsCount="1"
                                                      AllowedFileExtensions="png,jpg,jpeg,mp4"  
                                                      data-clientFilter="image/png, image/jpeg, video/mp4"
                                                      OnClientAdded="OnClientAdded"
                                                      AutoAddFileInputs="true">
                                       </telerik:RadAsyncUpload>

 

 function OnClientAdded(sender, args) {
            var allowedMimeTypes = $telerik.$(sender.get_element()).attr("data-clientFilter");
            $telerik.$(args.get_row()).find(".ruFileInput").attr("accept", allowedMimeTypes);
        }

0
Peter Milchev
Telerik team
answered on 14 Apr 2020, 10:19 AM

Hello David,

The AsyncUpload uses <input type="file" /> for each file, meaning the same approach that works for the input with type file would work for the AsyncUpload also. 

The code snippet that I have provided makes the FileDialog to show only .csv and .dbf files. 

Due to the fact that .csv and .dbf are not in the same category, that is why the browser shows "Custom Files" where it shows "Images" if the listed extensions are all image extensions.

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 16 Apr 2020, 03:09 PM

Hi Peter,

  I apologize your example does work!

  Last question, is there a way to get rid of "All Files" option?

Thank you

David

0
Peter Milchev
Telerik team
answered on 20 Apr 2020, 12:14 PM

Hello David,

Unfortunately, the "All Files" option is always there and cannot be removed. 

It does not matter much actually, because if the user selects it and select an invalid file, it will be rejected from the AsyncUpload based on the AllowedFileExtensions property you have set.

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
David
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 20 Apr 2020, 12:27 PM

No biggie, it works good now.

Thank you Peter

Tags
AsyncUpload
Asked by
Vinod
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
David
Top achievements
Rank 1
Iron
Iron
Veteran
Peter Milchev
Telerik team
Share this question
or