FileSystemHandle.requestPermission DOMException: User activation is required to request permissions

Question

I need a open local file feature in my website, so I use File System Access API in my code. when the file opened from local is edited by my web and need to save to original file. I found it has no permission. Therefore, I find the way to request filehandle permission like below:

    async function verifyPermission(fileHandle: any, readWrite: boolean) {
    const options = {
        mode: 'readwrite',
    };
    let isPermit = false;
    
    
    
    // Check if permission was already granted. If so, return true.
    if ((await fileHandle.queryPermission(options)) === 'granted') {
        isPermit =  true;
    }
    if ((await fileHandle.requestPermission(options)) === 'granted') {
        isPermit = true;
    }
    return isPermit;
}

but when i execute to fileHandle.requestPermission(options) it console error

Uncaught (in promise) DOMException: User activation is required to request permissions.

What I am missing? thank you QQ

score 3 · Answer 1 · answered Nov 09 '21 at 11:55

You can always query a file's permissions, but requesting requires a user gesture (like a button to be clicked). This is outlined in the spec (emphasis mine):

If the state of the read permission of this handle is anything other than "prompt", this will return that state directly. If it is "prompt" however, user activation is needed and this will show a confirmation prompt to the user. The new read permission state is then returned, depending on the user’s response to the prompt.

You need to decouple querying and requesting permissions in your implementation.

FileSystemHandle.requestPermission DOMException: User activation is required to request permissions

1 Answers1