File System Access | New in Chrome 86 | Доступ к файловой системе

Сегодня вы можете использовать элемент <input type = "file"> для чтения файла с диска. Чтобы сохранить изменения, добавьте загрузку (download) в тег привязки, появится окно выбора файла, а затем файл будет сохранен. Нет возможности записать в тот же файл, который вы открыли. Этот рабочий процесс раздражает.

С помощью API «Доступа к Файловой Системе — File System Access » (ранее — API «Собственной Файловой Системы — Native File System«), который вышел из исходной пробной версии и теперь доступен в стабильной версии, вы можете вызвать showOpenFilePicker(), который показывает средство выбора файла, а затем возвращает дескриптор файла, который вы можете используйте для чтения файла.

async function getFileHandle() {
   const opts = {
      types: [
         {
            description: 'Text Files',
            accept: {
               'text/plain': ['.txt', '.text'],
               'text/html': ['.html', '.htm']
            }
         }
      ]
   };
   return await window.showOpenFilePicker(opts);
}

Чтобы сохранить файл на диск, вы можете либо использовать этот дескриптор файла, который вы получили ранее, либо вызвать showSaveFilePicker(), чтобы получить новый дескриптор файла.

async function saveFile(fileHandle) {
   if (!fileHandle) {
      fileHandle = await window.showSaveFilePicker();
   }
   const writable = await fileHandle.createWritable();
   await writable.write(contents);
   await writable.close();
}

Перед записью Chrome проверит, предоставил ли пользователь разрешение на запись, если разрешение на запись не было предоставлено, Chrome сначала запросит пользователя.

Подсказка пользователю, запрашивающему разрешение на запись в файл.

Вызов showDirectoryPicker() откроет каталог, что позволит вам получить список файлов или создать новые файлы в этом каталоге. Идеально подходит для таких вещей, как IDE или медиаплееры, которые взаимодействуют с большим количеством файлов. Конечно, прежде чем вы сможете что-либо написать, пользователь должен предоставить разрешение на запись.

API предлагает гораздо больше возможностей, поэтому ознакомьтесь со статьей о Доступе к Файловой Системе на веб-сайте web.dev.

Внимание!

Это не стандарт W3C и не входит в список стандартов W3C