Приветствую вас дорогие читатели! Сегодня мы познакомимся с новым api Native File System. Данное api позволяет взаимодействовать с файловой системой вашего устройства(ПК). Стоит отметить что на момент написания статьи Native File System не имеет широкой поддержки и работает только в браузере google chrome начиная от версии 78. Также важно знать что работа с api должна осуществляться через защищенный протокол ssl (https), через http работать не будет. Итак, давайте перейдем к рассмотрению!

В одной из статей мы рассматривали работу с filesystem api которое позволяет управлять файловой системой внутри браузера, некой песочницей, без доступа к основной файл. системе ПК. В свою очередь Native File System api - частично этот доступ нам предоставляет.

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

<button id="ButtonCreateFile">Сохранить</button>
  <div>
    <br>
    <textarea id="text"></textarea>
  </div>
  <script>
    var ButtonCreateFile = document.querySelector('#ButtonCreateFile');
    ButtonCreateFile.addEventListener('click', async (e) => {
        const opts = {
          type: 'saveFile',
          accepts: [{
            description: 'Test file',
            extensions: ['txt'],
            mimeTypes: ['text/plain'],
          }],
        };
      //BufferSource или Blob
       var file = await window.chooseFileSystemEntries(opts),
           contents = document.querySelector('#text').value;
           const writerFile = await file.createWriter();
           await writerFile.write(0, contents);
           await writerFile.close();
    });
  </script>

При нажатии на кнопку 'сохранить' появится окно где вы сможете ввести название файла + расширение и выбрать место сохранения. В сам файл будет записан текст введенный в поле textarea.

Теперь немного по коду. Создание и сохранение файла осуществляется с помощью метода chooseFileSystemEntries(), объекта window:

const opts = {
      type: 'saveFile',
      accepts: [{
        description: 'Test file',
        extensions: ['txt'],
        mimeTypes: ['text/plain'],
      }],
    };
var file = await window.chooseFileSystemEntries(opts);

В этот метод передается объект opts с указанными параметрами и на выходе в переменную file мы получаем дескриптор для управления созданным файлом. Используя дескриптор файла можно произвести в него запись.

contents = document.querySelector('#text').value;
           const writerFile = await file.createWriter();
           await writerFile.write(0, contents);
           await writerFile.close();

Текст записи берется из поля textarea и затем через метод write() записывается в файл. Для тех кто не знает что такое await почитайте статью про Асинхронные функции.

С созданием и записью файла разобрались! Теперь рассмотрим чтение файла через Native File System.

Расширим наш пример, добавив кнопку 'открыть'.

<button id="ButtonCreateFile">Сохранить</button>
  <button id="ButtonOpenFile">Открыть</button>
  <div>
    <br>
    <textarea id="text"></textarea>
  </div>
  <script>
    var ButtonCreateFile = document.querySelector('#ButtonCreateFile');
    ButtonCreateFile.addEventListener('click', async (e) => {
        const opts = {
          type: 'saveFile',
          accepts: [{
            description: 'Test file',
            extensions: ['txt'],
            mimeTypes: ['text/plain'],
          }],
        };
      //BufferSource или Blob
       var file = await window.chooseFileSystemEntries(opts);
           contents = document.querySelector('#text').value;
           const writerFile = await file.createWriter();
           await writerFile.write(0, contents);
           await writerFile.close();
    });

    var ButtonOpenFile = document.querySelector('#ButtonOpenFile');

    ButtonOpenFile.addEventListener('click', async (e) => {

      fileHandle = await window.chooseFileSystemEntries(); 

      const file = await fileHandle.getFile();
      const contents = await file.text(); //arrayBuffer() slice() stream()
      document.querySelector('#text').value = contents;
    });
  </script>

Нажимая кнопку 'открыть' открывается окно в котором можно выбрать из файловой системы файл. При выборе которого выводится его текстовое содержимое в поле textarea.

Если посмотреть код, то:

fileHandle = await window.chooseFileSystemEntries(); 
const file = await fileHandle.getFile();
const contents = await file.text(); //arrayBuffer() slice() stream()
document.querySelector('#text').value = contents;

Для открытия окна опять же используется метод chooseFileSystemEntries() только в этот раз в него не передается параметр в виде объекта. На выходе получаем дескриптор(fileHandle) файла через который считываем его содержимое. Содержимое файла получаем в текстовом формате через метод text(), также возможны альтернативы для получения других форматов через функции arrayBuffer(), slice(), stream(). И в конечном итоге содержимое выводится в поле textarea.

Стоит отметить что у чтения файлов через Native File System есть альтернатива в использовании filereader api и так как второе более или менее поддерживается современными браузерами его использование более предпочтительно.

На закуску остается еще одна возможность которую предоставляет Native File System, а именно чтение содержимого каталогов.

<button id="ButtonOpenFolder">Открыть папку</button>
<script>
const ButtonOpenFolder = document.getElementById('ButtonOpenFolder');
ButtonOpenFolder.addEventListener('click', async (e) => {
    const opts = {type: 'openDirectory'};
    const handle = await window.chooseFileSystemEntries(opts);

    const entries = await handle.getEntries();
    for await (const entry of entries) {
      const file = entry.isFile ? 'File' : 'Directory';
        console.log(entry);
    }
});

</script>

При нажатии кнопки 'Открыть папку' у нас появляется возможность выбора директории в ПК. После выбора директории в консоль браузера будет выведен список ее файлов и папок в виде объектов(entry). Каждый объект содержит три ключа: name - название папки или файла, isDirectory - (true или false) является ли элемент директорией?, isFile - (true или false) - является элемент файлом? Заметьте что перед просмотром содержимого директории у нас запрашивается разрешение на ее просмотр. Также следует понимать что не все папки на ПК доступны для чтения поэтому при выборе некоторых может выйти запрос на выбор иной директории.

Выбор директории происходит через метод chooseFileSystemEntries() в который передается параметр(opts) в виде объекта. Содержимое директории считывается через метод getEntries().

В целом на момент написания данной статьи это пока все возможности которые предоставляет Native File System api но и не удивительно, так как технология еще очень молодая. В скором времени вполне возможно появление дополнительных возможностей и широкой поддержки в браузерах данного api. Поэтому как минимум знать о существовании подобного механизма будет полезно!

На этом у меня все. Надеюсь я смог донести до вас новую информацию! Для уведомлений о выходе новых статей подписывайтесь на мою группу Вконтакте. Для поиска дополнительной информации вы можете перейти на мой канал Youtube.

Удачи и здоровья!