This week I played with the
File System Access API: this feature allow you to create web apps that can interact with files on the user’s local device. After a user grants a web app access, this API allows them to read or save changes directly to files and folders on the user’s device.
I want to reproduce with Construct 3 a text editor with similar functionality to the one developed by the Google Chrome Labs (text editor). I also followed this guide: The File System Access API: simplifying access to local files.
Of course I also shared the whole thing on GitHub:
In the next days I will publish this article also on Patreon.
For simplicity, I leave out the explanation of error handling. The entry point is
window.showOpenFilePicker(). When called, it shows a file picker dialog box, and prompts the user to select a file. After they select a file, the API returns an array of file handles. An optional parameter lets you influence the behavior of the file picker, for example, by allowing the user to select multiple files, or directories, or different file types. Without any option specified, the file picker allows the user to select a single file.
I assign an array of
Globals.fileHandle. In this case it’s a one-element array that contains the properties and methods needed to interact with the file.
Note: I haven’t implemented yet a method to keep track of all open files, but only one. However, doing so would allow you to implement a list of recent files to use as a shortcut to open the latest files you worked on.
Now from the handle you can access the
file itself via
and then you can read its contents.
The second function,
write, allows you to save text changes directly to the file. To do this you use the
FileSystemWritableFileStream interface. Then you can create the stream by calling
Now you can write the contents of the file to the stream.
At the end you can close the file and write the contents to disk:
Caution: Changes are not written to disk until the stream is closed.
Everything is simpler from now on. saveAs uses
getNewFileHandle() to get the name and location to save the file to. Then you can call
write() to… write the file.
saveFile is even simpler. If you are editing a file it’s call
write. If you are working on a new file, it’s call
loadFromFile reloads the file to the state prior to the last save.
With this I completed the basic structure. However, there is no simple way to integrate all this with our editor. To do this you need a new module:
I only focus on two functions,
getText. They both use
This code allows you to access the Construct 3 text box. The first modifies the text contained, the second reads it. This is necessary to allow C3 to correctly display the content of the element.
The following functions do nothing but call those of the
FileSystemAccess module by connecting them to the actual editor.
That said, it’s time for links: