File Filter Doesn't Work

[Vinod]

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);
}

[Princy]

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.

[David]

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]

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.

 

 

 

 

[Peter Milchev]

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

[Allen]

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]

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]

OK, should the Javascript alternative also work?  And will setting this as shown constrain the browse files dialog as expected?

[David]

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);
        }

[Peter Milchev]

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. 

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers;
    
    
• https://stackoverflow.com/a/11834872/10759760;

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

[David]

Hi Peter,

  I apologize your example does work!

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

Thank you

David

[Peter Milchev]

Hello David,

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

• https://stackoverflow.com/questions/24114493/remove-all-files-option-from-html-file-input

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

[David]

No biggie, it works good now.

Thank you Peter