Помню, в одном из банков, которые я сменил за последние несколько лет, в настройках была опция выбрать папку для сохранения файлов.

Пользователь один раз выбирал директорию, а дальше все выгрузки сохранялись туда без стандартного диалога выбора файла.

Тогда я и решил разобраться, как браузер вообще может работать с локальной файловой системой. Долго откладывал, но наконец добрался до File System Access API.

Это API позволяет сайту работать с локальными файлами и папками, но только после явного выбора пользователя.

Например, можно открыть папку и пройтись по её содержимому:

const directoryHandle = await window.showDirectoryPicker({
  mode: 'read',
});
 
for await (const [name, handle] of directoryHandle.entries()) {
  console.log(name, handle.kind);
}

handle.kind будет file или directory.

Можно попросить пользователя выбрать конкретный файл и прочитать его:

const [fileHandle] = await window.showOpenFilePicker({
  types: [
    {
      description: 'Text files',
      accept: {
        'text/plain': ['.txt', '.md', '.json'],
      },
    },
  ],
});
 
const file = await fileHandle.getFile();
const content = await file.text();
 
console.log(content);

А можно создать новый файл и записать в него данные:

const fileHandle = await window.showSaveFilePicker({
  suggestedName: 'notes.md',
  types: [
    {
      description: 'Markdown',
      accept: {
        'text/markdown': ['.md'],
      },
    },
  ],
});
 
const writable = await fileHandle.createWritable();
 
await writable.write('# Hello from browser');
await writable.close();

🔐 С безопасностью всё завязано на явное действие пользователя. Сайт не может просто так взять и открыть произвольную папку на диске.

Более того, браузер может не дать выбрать слишком широкие или чувствительные директории — например, Downloads или Desktop. Там обычно лежит всё подряд, и отдать сайту доступ к такой папке слишком легко случайно.

Запись тоже требует отдельного разрешения. Плюс API работает только в secure context: HTTPS или localhost.

Конечно, в продакшене использовать всё это врядли получится. Функции всё ещё экспериментальные и нормально поддерживаются в основном Chromium-браузерами, поэтому на телефоне не заведётся.

🧪 Собрал небольшое демо, где можно потыкать это в браузере.

https://cherkashin.dev/demos/file-system-access-demo/

Ставьте:
👍 — если знали про File System Access API
❤️ — если узнали что-то новое
😱 — если страшно давать браузеру доступ к файлам