How to avoid two sequential alerts (one for read and one for edit) when using `window.showDirectoryPicker()`

Question

const dirHandle = await window.showDirectoryPicker();
await dirHandle.requestPermission({ mode: "readwrite" });

I'm using the File System Access API in chrome. I'd like to let the user pick a folder, then write into the folder.

My code works, but two alerts are shown sequentially, one for read and one for write:

The first one is unnecessary. How can I avoid it?

Interestingly, if the user uses drag and drop, only the 2nd alert will appear after the folder is dropped, which is the desired behavior. The first alert seems to come from showDirectoryPicker. In the ideal world, I imagine being able to pass in an option like showDirectoryPicker({ permission: 'readwrite' }), which will request the 2 permissions together.

Answer 1

As of Chrome 105, you can get a writable directory with just one prompt

const dirHandle = await window.showDirectoryPicker({ mode: "readwrite" });

Or be explicit in asking for a read-only directory (which is the default).

const dirHandle = await window.showDirectoryPicker({ mode: "read" });

Answer 2

I agree it feels suboptimal, but it's a one-time thing. When you run the same code again and pick the same folder (or a nested folder), there will be no prompts at all.

This design was chosen because there are two different things that are being asked here:

• First, for the app to read all files (which, recursively for subfolders can be a lot).
• Second, for the app to be allowed to write (anywhere) into the folder.