captainbrosset / file-handling-demo

A demo app showing all of the ways files can be opened or saved on the web

Web File Handling Demo

The purpose of this demo app is to show the different ways in which files can be handled on the web.

Read my blog post for more information about this.

The app supports the following features:

• Importing files:
  • Using a <input type=file> input.
  • Using drag and drop.
  • Pasting a file.
  • As a PWA share target.
  • As a PWA file handler.
  • Using the File System Access API to open a file (or re-open a previously opened file).
• Exporting files:
  • Using a <a download> element.
  • Using the Web Share API.
  • Using the File System Access API to save back to the file, or save as a new file.

Building locally

• npm install
• npm run build
• Then start a web server from the public directory.

Browser support

🖥 = limited to desktop platforms
📦 = requires installation
🚧 = experimentally supported
✅/⛔️ without label = applies to all platforms (iOS only counts for Safari)

	Chrome	Edge	Safari	Firefox
<input type=file>	✅	✅	✅	✅
🖥 Drag and drop file	✅	✅	✅	✅
Paste file	✅ Windows ✅ macOS ⛔️ Android*	✅ Windows ✅ macOS ⛔️ Android*	✅	⛔️ (bug)
📦 Web Share Target	⛔️ Windows† ⛔️ macOS ✅ Android†	✅ Windows† ⛔️ macOS ⛔️ Android†	⛔️	⛔️
📦 File Handling (?)	🚧 Windows‡ ⛔️ macOS ⛔️ Android	❓ Windows‡ ⛔️ macOS ⛔️ Android	⛔️	⛔️
File System Access	✅ Windows ✅ macOS ⛔️ Android	✅ Windows ✅ macOS ⛔️ Android	❓§	⛔️
<a download>	✅	✅	✅	✅
Share file (navigator.share)	✅ Windows ⛔️ macOS (bug) ✅ Android	✅	✅	⛔️ (bug)

*On Android, it is not possible to paste files to the web because the clipboard can’t contain files.
†On Windows, only PWAs installed through Edge appear in the system’s share dialog. On Android, only PWAs installed through Chrome appear in the system’s share dialog.
‡File Handling is experimentally supported in Edge on Windows, but when choosing to open a text file in the demo app (“Open with…”), the app opens in its default state without the file’s contents; see #5.
^§File System Access is experimentally supported in Safari, but it doesn’t (yet) work in the demo app.