Веб-приложения теперь могут взаимодействовать с вашей файловой системой

< input type="file">

. Невозможно писать напрямую в файловую систему пользователя, используя предыдущие API. Вы должны использовать ссылки для скачивания, если вам нужно предоставить файл пользователю.

API доступа к файловой системе предоставляет веб-сайтам способ получить доступ для чтения и записи к файловой системе вашего устройства. Это позволяет создавать новые классы сложных веб-приложений, взаимодействующих с вашими файлами. Текстовые веб-редакторы, библиотеки фотографий и медиаплееры могут загружать содержимое, хранящееся локально на вашем устройстве.

Используя API, вы можете перечислять содержимое каталогов, считывать данные из файлов и выполнять обратную запись в новые и существующие файлы, хранящиеся на устройстве пользователя. Доступ предоставляется через объекты-дескрипторы FileSystemFileHandle и FileSystemDirectoryHandle, которые представляют файлы в системе пользователя.

API доступа к файловой системе можно использовать только со страниц, загружаемых через HTTPS. Он закрыт разрешениями, на которые пользователь должен дать явное согласие. Пользователю будет предложено предоставить согласие каждый раз, когда вы используете API. При этом используется та же система, что и при запросах разрешений для других веб-функций, таких как уведомления и доступ к камере.

Как и большинство современных API-интерфейсов JavaScript, доступ к файловой системе является асинхронным. Вызовы его поверхности API возвращают обещания. Самый простой способ использовать его — использовать синтаксис async/await ES7, который мы будем использовать в следующих примерах.

Чтение файла

Чтобы прочитать файл, вы открываете средство выбора файлов с помощью функции window.showOpenFilePicker(). Нет необходимости использовать HTML

< input type="file">

const [fileHandle] = await window.showOpenFilePicker();
const file = await file.getFile();
const fileData = await file.text();
console.log(fileData);

const files = await window.showOpenFilePicker({
    multiple: true,
    types: [
        {
            description: "Image Files",
            accept: ["image/jpeg", "image/png"]
        }
    ]
});
 
for await (file of files) {
    const fileData = await file.getFile();
    console.log(fileData);
}

// User selects a file
const fileHandle = await window.showOpenFilePicker();
 
// Get a `FileSystemWritableFileStream` we can write to
const writableFileStream = await fileHandle.createWritable();
 
// Write new file contents into the stream
await writableFileStream.write("Hello World");
 
// Close the writable stream - its content is now persisted to the file on disk
await writableFileStream.close();

const fileHandle = await window.showSaveFilePicker();
const writable = await fileHandle.createWritable();
await writable.write("Hello World");
await writable.close();

const directoryHandle = window.showDirectoryPicker();
for await (let handle of directoryHandle.values()) {
    if (handle.type === "file") {
        // file
    }
    if (handle.type === "directory") {
        // subdirectory
    }
}

await directoryHandle.removeEntry("file.txt");
await directoryHandle.removeEntry("Subdirectory", {recursive: true});

const mode = "read";    // may also be "readwrite"
if (await fileHandle.queryPermission({mode}) === "granted") {
    // OK
}