Как создать файл в локальной fs, используя современный FileAPI?

#javascript #fileapi

Вопрос:

У меня есть этот код:

 document.querySelector('#myfile').onchange = function(e) {
  var files = this.files;
  window.requestFileSystem(window.TEMPORARY, 1024 * 1024, function(fs) {
    let file = files[0];
    let nem_file_name = file.name   '_copy';
    fs.root.getFile(nem_file_name, {
      create: true,
      exclusive: true
    }, function(fileEntry) {
      fileEntry.createWriter(fileWriter => {
        fileWriter.write(file);
      }, () => alert('error 1'));
    }, err => alert('error 2 '   err));
  }, () => alert('error 3'));
};

 <input type="file" id="myfile" ref="myfile" multiple />

Развернуть фрагмент

Я хочу создать копию своего файла, когда я выбираю его с помощью элемента управления вводом. Что не так с моим кодом? У меня нет ошибок, и ничего не происходит

Ответ №1:

«Современный» API называется File System Access, это все еще только предложение, но ожидается, что он заменит предыдущий и устаревший API файловой системы и уже доступен в браузерах Chromium.

Чтобы записать файл с помощью этого API, вы сначала запрашиваете дескриптор файла с помощью showSaveFilePicker() метода, затем вы можете создать writer из этого дескриптора и добавить данные с помощью этого writer:

 onclick = async (e) => { // needs to be initiated by an user gesture
  const handle = await showSaveFilePicker(); // prompt "Save As"
  const writer = await handle.createWritable(); // request writable stream
  await writer.write( new Blob( [ "some data" ] ) ); // write the Blob directly
  writer.close(); // end writing
};

Но этот API по-прежнему чрезмерно защищен, поэтому, к сожалению, его нельзя запускать в iframes с разными исходными кодами, как те, которые используются здесь StackSnippet или большинством популярных скриптовых сервисов. Итак, чтобы сделать живую демонстрацию, мне пришлось создать плунжер, который вы должны запускать в оконном режиме.

И если вам нужно самостоятельно задать имя файла, вам нужно запросить доступ к каталогу, используя showDirectoryPicker() , а затем получить дескриптор файла из этого дескриптора каталога, используя его getFileHandle() метод. plnkr

1. Существует ли какое-либо решение для локальной записи файла, по крайней мере, в браузере Chrome?

2. @mystdeim вы читали этот ответ? Да, такое решение существует, код там делает именно это.

3. Я добавляю окно. прежде чем показывать savefilepicker в вашем примере, и он работает, спасибо!

4. кстати, я не нашел возможности передать пользовательское имя файла в showSaveFilePicker.

5. @mystdeim … это также в ответе, проверьте второй plnkr

Ответ №2:

В документации указано, что этот метод является нестандартным, только в Chrome и уже устарел:

Даже по сравнению с остальными API для записи файлов и каталогов, requestFileSystem() является особенно нестандартным; его реализует только Chrome, а все остальные производители браузеров решили, что не будут его внедрять. Он даже был удален из предлагаемой спецификации. Не используйте этот метод!

Вы не должны использовать это.