Окно: метод showOpenFilePicker()

Метод showOpenFilePicker() интерфейса Window отображает средство выбора файла, позволяющее пользователю выбрать один или несколько файлов и возвращает дескриптор файла(ов).

options Необязательный

Объект, содержащий параметры:

excludeAcceptAllOption Необязательный

Булевое значение, по умолчанию false. По умолчанию средство выбора должно включать опцию для выбора файлов без фильтрации по типу (инициируется параметром type ниже). Установка этого параметра в true означает, что эта опция не доступна.

id Необязательный

Указывая идентификатор, браузер может запоминать разные каталоги для разных идентификаторов. Если для другого средства выбора используется тот же идентификатор, средство выбора открывается в том же каталоге.

multiple Необязательный

Булевое значение, по умолчанию false. При установке в значение true можно выбрать несколько файлов.

startIn Необязательный

FileSystemHandle или известный каталог ("desktop", "documents", "downloads", "music", "pictures", или "videos"), для открытия диалога.

types Необязательный

Массив разрешенных типов файлов для выбора. Каждый элемент — объект со следующими параметрами:

description Необязательный

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

accept

Объект с ключами, установленным как MIME-тип, и значениями — массив расширений файлов (см. пример ниже).

Обещание Promise, обработчик выполнения которого получает массив Array объектов FileSystemFileHandle.

AbortError DOMException

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

SecurityError DOMException

Выбрасывается, если вызов был заблокирован политикой одного происхождения или не был вызван с помощью пользовательского взаимодействия, например, нажатия кнопки.

TypeError

Выбрасывается, если типы accept не могут быть обработаны, что может произойти, если:

• Любой строковый ключ параметров accept любого элемента в параметрах types не может обработать допустимый MIME-тип.
• Любая строковая(ые) значения параметров accept любого элемента в параметрах types недействительны, например, если не начинаются с . и не заканчиваются на ., или если содержат недопустимые кодовые точки, а их длина превышает 16.
• Параметры types пустые, а параметры excludeAcceptAllOption равны true.

Временная активация пользователя требуется. Пользователь должен взаимодействовать со страницей или элементом пользовательского интерфейса, чтобы эта функция работала.

Здесь мы устанавливаем объект параметров для передачи в метод. Мы будем разрешать выбор типов файлов изображений, без опции разрешения всех типов файлов или выбора нескольких файлов.

const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

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

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

• API файловой системы
• API файловой системы: упрощение доступа к локальным файлам