Support for "Open local file" button in Safari/Firefox

[jtbandes]

Safari and Firefox do not support window.showOpenFilePicker(): https://caniuse.com/mdn-api_window_showopenfilepicker

We need to find an alternative that can be used for browsers that don't support showOpenFilePicker.

[defunctzombie]

What is the alternative? We do not support firefox or safari so this sounds like an enhancement to improve cross browser compatibility rather than a bug impacting our supported workflow.

[RFRIEDM-Trimble]

I am receiving this error in Chrome on ubuntu 20.04; it doesn't seem to be restricted to just Safari/Firefox. Info attached below.

TypeError: window.showOpenFilePicker is not a function

In console logs:

main.58dd74b9132c16078faa.js:sourcemap:4443 [packages/studio-base/src/hooks/useCallbackWithToast.ts] TypeError: window.showOpenFilePicker is not a function
    at yn (main.58dd74b9132c16078faa.js:4484:33435)
    at main.58dd74b9132c16078faa.js:4484:45079
    at async Object.onClick (main.58dd74b9132c16078faa.js:4443:12530)

$ google-chrome-stable --version
Google Chrome 97.0.4692.99 

$ docker run --rm -p "8080:8080" ghcr.io/foxglove/studio:latest
Unable to find image 'ghcr.io/foxglove/studio:latest' locally
latest: Pulling from foxglove/studio
be307f383ecc: Pull complete
3e205c63fa7e: Pull complete
674f75736ea4: Pull complete
e004593c132f: Pull complete
51900aef2f22: Pull complete
521de6d39e80: Pull complete
70810fe4b4f5: Pull complete
Digest: sha256:07024c0ef95348e114040d940f4fb2b6a27b58dbe130c1bd72745418b1ed3ae6
Status: Downloaded newer image for ghcr.io/foxglove/studio:latest
{"level":"warn","ts":1642909933.2922385,"logger":"admin","msg":"admin endpoint disabled"}
{"level":"info","ts":1642909933.2927074,"logger":"tls.cache.maintenance","msg":"started background certificate maintenance","cache":"0x40002ca070"}
{"level":"info","ts":1642909933.3037648,"logger":"tls","msg":"cleaning storage unit","description":"FileStorage:/data/caddy"}
{"level":"info","ts":1642909933.3042374,"logger":"tls","msg":"finished cleaning storage units"}
{"level":"info","ts":1642909933.3054347,"msg":"autosaved config (load with --resume flag)","file":"/config/caddy/autosave.json"}
2022/01/23 03:52:13 Caddy 2 serving static files on :8080

Note: On a quick search, docs indicate Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. I'm using http for Foxglove, at least right now.

[defunctzombie]

Note: On a quick search, docs indicate Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers. I'm using http for Foxglove, at least right now.

That's right - this feature either requires you to serve the website via https or use localhost to access the site. This is a requirement imposed by the browser. We don't have any immediate plans to work on changing this requirement.

[jtbandes]

Looking into this a bit more, it sounds like Firefox has no plans to implement showOpenFilePicker — and Safari is slowly starting to implement the File System Access APIs, but they haven't said anything about showOpenFilePicker in particular.

There's a ponyfill at https://github.com/use-strict/file-system-access but it has a major limitation relevant to our app:

showDirectoryPicker and showOpenFilePicker will not throw any AbortErrors (e.g. user cancellations) when using a fallback input element

This means that the promise returned by showOpenFilePicker never resolves.

We could try the ponyfill but it might be cleaner and less bug-prone to change our APIs so we aren't working with Promises for opening files (since they may never resolve), and just make our own <input>. We can use showOpenFilePicker if it exists, but we may not want it to be our primary API.

[defunctzombie]

Last I remember looking into the this my conclusion was that showOpneFilePicker as the only api that returned a FileSystemHandle which is what we store in indexeddb and power the "recents" feature. File does not have a handle for storing in indexeddb and instead ends up storing the whole file.

This keep coming up so it is maybe worth a better comment in the code why we use showOpenFilePicker.

[jtbandes]

I think if we have any path forward for supporting browsers other than chrome, we might just have to accept that we can’t store local files in recents on those browsers.

[chfritz]

For anyone just wanting to test with local files: you can still drag & drop files from your local file system, at least in Chrome (haven't tested anywhere else yet).