Recipe 10.5

Checking and Requesting Permissions

Compatibility Note: showOpenFilePicker

This feature may not be supported on all browsers yet. Please check the latest compatibility data before using in a production application.

Browser support for showOpenFilePicker

Click the button to select an local file and check permissions.

Demo

Code

JavaScript

const button = document.querySelector('#check-button');
const resultElement = document.querySelector('#result');

if ('showOpenFilePicker' in window) {
  document.querySelector('#check-button').addEventListener('click', async () => {
    const [file] = await window.showOpenFilePicker();

    let result = await file.queryPermission({ mode: 'readwrite' });
    if (result === 'prompt') {
      result = await file.requestPermission({ mode: 'readwrite' });
    }

    if (result === 'granted') {
      resultElement.classList.add('alert-success');
      resultElement.classList.remove('alert-danger');
      resultElement.textContent = `Read-write permission allowed for file ${file.name}`;
    } else {
      resultElement.textContent = `Read-write permission not granted for file ${file.name}`;
      resultElement.classList.remove('alert-success');
      resultElement.classList.add('alert-danger');
    }

    resultElement.classList.remove('d-none');
  });
} else {
  resultElement.textContent = 'This browser does not support File System Access.';
  resultElement.classList.remove('d-none');
  resultElement.classList.remove('alert-success');
  resultElement.classList.add('alert-danger');
  button.disabled = true;
}

HTML

<button id="check-button" class="btn btn-primary">Select File</button>

<div id="result" class="d-none my-4 alert alert-success" role="alert">
</div>