Not able to import servers in Firefox for Android

[JasonHK]

shlink-web-client version

4.1.0

How do you use shlink-web-client

https://app.shlink.io

Current behavior

*.csv files not selectable. Firefox for Android seems not recognised text/csv mime type.

shlink-web-client/src/servers/helpers/ImportServersBtn.tsx

Line 90 in c75a3a4

<input type="file" accept="text/csv" className="d-none" ref={ref} onChange={onFile} aria-hidden />

Expected behavior

Change to text/csv,.csv would probably make it works.

Minimum steps to reproduce

1. Click the Import servers button with Firefox for Android.
2. *.csv files not selectable.

[acelaya]

I have just tested importing servers in Firefox for Android, and it works just fine for me.

When you say *.csv files not selectable, what do you mean exactly? The file appears but is disabled? The file does not appear at all? Have you granted Firefox all required permissions to access files?

[JasonHK]

@acelaya The file was shown but was disabled, which look like this:

[acelaya]

Do you have other files in the same directory that are not showing? If that's the case, it could mean the filter is in fact working, but Firefox is missing some permission to be able to pick files. I was promoted with a couple of permission-granting confirmations when I tried to import servers.

[JasonHK]

Other files were shown as well, and like the CSV file, were disabled. For the permissions, it was granted before.

[acelaya]

Ok, then it sounds like it's in fact not matching.

What Android and Firefox versions are you using? Is it a stock Android, or a brand-modified version? (Xiaomi, Samsung, etc.)

[JasonHK]

Android 14 (with One UI 6), Firefox Nightly 126 (also tested on Firefox Beta 119, not working as well)

[acelaya]

Can you share a copy of that CSV file with me? Feel free to edit it to obfuscate API keys and URLs.

Also, how did you generate it? I see it doesn't have the default shlink-servers.csv name generated by shlink-web-client when exporting servers.

[acelaya]

Never mind. I was able to reproduce it by renaming shlink-servers.csv to Shlink Servers.csv. For some reason the extra space seems to make Firefox or Android think it's no longer a CSV? I'll check.

In fact, I noticed that using the "Files" Android app, the file shows a CSV/grid/Excel icon when I have just exported it, but if I rename it, it switches the icon to "plain text".

[acelaya]

I noticed that, in Chrome for Android, the accept="text/csv" does not have any effect. It allows me to pick any file.

By doing a quick search, it seems the recommended way to restrict a file input for CSV files in a cross-browser way is the one you suggested, so I'll just go with that approach and do a bit of testing.

[acelaya]

Well, it is not as easy as it seemed 😅 https://caniuse.com/?search=input%20type%20file%20accept

Basically, this feature is well supported in desktop browsers, but effectively "not supported" in mobile browsers.