Renaming / moving files using File System Access API (javascript)

Question

I've been following this article to allow users to (semi) automatically save a client side generated XML file to a specific local folder. A third party program is watching this folder and will process its contents and output content in another file.

Problem is that it takes about 250 ms from the file is created until the content is actually written to the file using the close() method.

Sometimes the third party program will detect the file has been created and try to read its contents before its written. The program does not support adding a delay before trying to read the file content.

I've looked into writing the file to a temporary location and moving it once its closed, but this does not seem to be possible with this API. The same goes for renaming the file.

Creating / downloading the file using a normal dialog would probably work, but this requires manual steps that can be avoided using the file system access API.

Another solution would be to install a local program that can move the file from a temporary folder to the program watch folder when its closed, but I would rather avoid having to install software on the client.

Is there any other way to avoid this issue?

Thanks

Condiment

If you're talking about the temporary .crswap file. There's a few workarounds mentioned in crbug.com/1168715 but they seem pretty tedious to work with. – Tacnode

The .crswap file is fine. The problem is basically that an empty file is initially created by getFileHandler(filename, {create: true}) and only after ~250 ms is the actual content written to file (where the content from the temporary .crswap file is copied into the empty file created earlier). The problem would be solved if I could wait with creating the file until closing it. – Condiment

Ah it seems move functionality is actively being worked on right now. It's available in Canary with the chrome://flags/#enable-experimental-web-platform-features flag. – Tacnode

Thanks! just tried it out and both move and rename works now. – Condiment

Answer 1

There is now a way to rename and move files (currently implemented in Chrome behind the experimental web platform features flag):

// Get references to a file and a directory.
const [file] = await showOpenFilePicker();
const directory = await showDirectoryPicker();

// Rename the file.
await file.move('new_name');
// Move the file to a new directory.
await file.move(directory);
// Move the file to a new directory and rename it.
await file.move(directory, 'newer_name');

You can follow the spec work by subscribing to this PR.

Note that, confusingly, unflagged Chrome does have the .move() method on all file handles (not just OPFS ones), but using it throws a "User aborted a request" error.

Starlight

I've tried creating and moving the file using the latest (non-canary) Chrome (v96.0.4664.45) and experimental features enabled, however I'm getting a "DOMException: The user aborted a request" whenever I'm trying to move the file. Everything works as should if I leave out the move. The same code works perfectly in canary. – Condiment

Yes, this is expected since the feature was only fully implemented in 98. It was only partially implemented in earlier versions (which is why it is hidden behind a flag). – Starlight