In this article, I will show how to use the File System Access API. This API is a web platform API that enables developers to build powerful web apps that interact with files on the user’s local device. There are a few caveats in using this API such as accessing local files requires user interaction, such as clicking a button.

These APIs are not yet supported by all browsers. Chrome, Edge, and Opera support them, but Brave, Firefox and Safari do not. You can check compatibility here. Writing Python code is easy. Developing applications that support a wide range of environments can be a challenge.

If you are targeting the desktop version of Chrome or Edge, this is the API to use. If you are targeting Firefox or mobile devices, you must use the older FileReader APIs I wrote about in Part 1.

I have put each example in this article on my website. My examples can be downloaded using wget, curl , or by right-clicking on the page and selecting view page source. You can also right-click on the link and select Save link as.

Examples:

Part 1 of this series.

Feature Availability Check

It is a good idea to check if the File System Access API is available as some browsers do not support it.

Local File Read

To read a local file requires using the showOpenFilePicker(). This function must be called in an event handler from a user action such as clicking a button. This code demonstrates the error if you try to call it directly:

An exception will be generated:

One solution is to create a button that calls an event handler when clicked.

Specify the required imports:

Create a proxy to manage the interface from JavaScript to Python and attach it to the button:

Create the function to be called when the user clicks the button:

The showOpenFilePicker() function returns a FileSystemFileHandle sequence. The user can select one or many files.

To allow the user to select multiple files:

You can also specify filter options. For example, to open the file picker in the Documents folder:

See this link for more information about “WellKnownDirectory” options and this link for file picker options.

You can fetch details about the selected file such as file name and size. Let’s console.log those properties. At this time, you cannot use the Python print() statement in event handlers.

To read the file data, call file.text():

I put a complete example on my website: fsa_example_1.html

Local File Write

To select/create a local file requires using the showSaveFilePicker(). This function must be called in an event handler from a user action such as clicking a button.

If you try to call showSaveFilePicker()without directly, the browser will display an error in the debugger Console window similar to:

This function will create a file. If nothing further is done with the file returned by this function, the length will be 0 bytes.

The showSaveFilePicker() function supports options. For example, to start in the Documents folder and suggest a filename to save to:

To write data to the file, get a writable handle:

Do not forget to close the file handle.

I put a complete example on my website: fsa_example_2.html

For browsers that do not support the showSaveFilePicker() API, use the following code:

This technique creates an HTML anchor and attaches data to the anchor as an href. This code does not require user interaction to execute such as a button click.

Summary

This article covered the basics of using the File System Access API. The is an easy to use interface to the local file system. If the desktop has drivers installed for services such as Microsoft One Drive or Google Drive, you can select them as a save file destination.

More Information

Photography Credit

I write free articles about technology. Recently, I learned about Pexels.com which provides free images. The image in this article is courtesy of Djalma Paiva Armelin at Pexels.

Related Posts