Работа с файлами: File System Access API и потоковая обработка. Чтение/запись на клиенте и работа с большими данными

Сегодня мы погрузимся в современные методы работы с файлами прямо в браузере. Вы узнаете, как использовать File System Access API для прямого доступа к файловой системе пользователя и как обрабатывать гигабайты данных через потоковые API. Мы разберем конкретные примеры, сравним подходы и дадим практические рекомендации.

Почему это важно?

Раньше работа с файлами в браузере сводилась к элементам <input type="file"> и ручной обработке данных через FileReader. Это создавало проблемы:

1. Ограничения по размеру файлов (риск зависания страницы)
2. Невозможность сохранения изменений обратно на диск
3. Сложности с прогрессивной обработкой данных

Современные API решают эти проблемы. Давайте изучим их на практике.

File System Access API: прямой доступ к файловой системе

Что это?

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

Основные возможности:

• Чтение/запись файлов
• Сохранение изменений в исходный файл
• Работа с директориями
• Поддержка drag-and-drop

Пример: чтение файла

async function readFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker();
    const file = await fileHandle.getFile();
    const content = await file.text();
    console.log(content);
  } catch (err) {
    console.error('Ошибка:', err);
  }
}

Пример: запись в файл

async function saveFile(content) {
  try {
    const handle = await window.showSaveFilePicker({
      types: [{
        description: 'Text files',
        accept: {'text/plain': ['.txt']},
      }],
    });
    
    const writable = await handle.createWritable();
    await writable.write(content);
    await writable.close();
  } catch (err) {
    console.error('Ошибка записи:', err);
  }
}

Потоковая обработка: работа с большими данными

Зачем это нужно?

При обработке файлов размером 1 ГБ традиционные методы (например, File.text()) загружают весь файл в память, что приводит к:

• Блокировке основного потока
• Увеличению потребления памяти
• Крашам вкладки

Streams API решает эти проблемы, обрабатывая данные по частям.

Пример: потоковое чтение

async function streamFile(file) {
  const readableStream = file.stream();
  const reader = readableStream.getReader();
  
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    // Обработка чанка данных (value)
    console.log('Получен чанк:', value);
  }
}

Пример: потоковая трансформация

async function processLargeFile(file) {
  const stream = file.stream()
    .pipeThrough(new TextDecoderStream())
    .pipeThrough(new TransformStream({
      transform(chunk, controller) {
        // Преобразование каждого чанка
        const processed = chunk.toUpperCase();
        controller.enqueue(processed);
      }
    }))
    .pipeThrough(new TextEncoderStream());

  // Сохранение результата
  const newHandle = await window.showSaveFilePicker();
  const writable = await newHandle.createWritable();
  await stream.pipeTo(writable);
}

Сравнение подходов

Рекомендации для разработчиков

1. Комбинируйте подходы:
   • Используйте File System Access для выбора файлов
   • Обрабатывайте данные потоками
2. Всегда запрашивайте разрешение:
   javascript

   if (await fileHandle.queryPermission() !== 'granted') {
     await fileHandle.requestPermission();
   }

3. Обрабатывайте ошибки грамотно:
   • Отлавливайте AbortError при отмене выбора файла
   • Используйте try/catch для операций с файлами
4. Оптимизируйте производительность:
   • Для CSV/XLSX: обрабатывайте строки по мере чтения
   • Для медиа: используйте VideoDecoder/AudioDecoder API
5. Тестируйте на реальных данных:
   javascript

   // Генерация тестового файла 2 ГБ
   const largeFile = new File([new ArrayBuffer(2 * 1024 * 1024 * 1024)], 'test.bin');

Современные API открывают новые возможности для веб-приложений. Я рекомендую:

• Использовать File System Access для нативных файловых операций
• Все большие файлы обрабатывать через Streams API
• Всегда учитывать ограничения браузеров