Saving a Real File From Flutter Web, Instead of Downloading Another Copy

When editing a file in Flutter Web, the default behavior is to create a new copy instead of modifying the original file. Users end up with multiple numbered versions of the same file in their Downloads folder, unsure which one is the most recent. This is not a limitation of Flutter Web, but rather a common practice on the web for the past twenty years. The issue stems from the way browsers handle downloads and file saving.

The File System Access API introduces a new capability that allows a web page to directly access and modify real files on the user's computer, with the user's explicit permission. Using this API, a page can write directly to a file without creating a copy, making it possible to edit the original file in place. The API works by granting a handle to a specific file, which can be used to read from and write to the file.

The browser mediates all access to the file and provides proper permission handling, ensuring that a user cannot access files they did not grant permission to.

In Flutter Web, you can leverage this API to implement a true saving functionality. By calling `FileSystemAccess.openFile()`, you can obtain a handle to the desired file and then use `file.write(bytes)` to write back to the same file, effectively saving your changes without creating a new copy. This approach provides a more seamless and intuitive editing experience for users, as they can modify the file directly and have their changes persist without the need for multiple numbered versions.

However, it's important to note that the File System Access API is not universally supported across all browsers. Chrome, Edge, and other Chromium-based browsers have support, while Safari and Firefox currently do not. Therefore, when implementing this functionality in Flutter Web, it's crucial to check for API support at runtime and provide an appropriate fallback for browsers that do not support the API.

This fallback should clearly indicate that a download is being performed, avoiding any confusion or misleading the user about the actual behavior of the application.

By utilizing the File System Access API, Flutter Web applications can now provide a more robust and user-friendly file saving experience, aligning with modern web standards and offering a more polished editor-like functionality compared to the traditional download-a-copy approach. This capability opens up possibilities for building more powerful and feature-rich applications on the web, such as project folders, photo sets, or Markdown note editors, where the ability to save changes directly to a file is essential for a productive user experience.