如何使用现代 FileApi 在本地 fs 中创建文件？

Question

I have this code:

 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 />

I want to create a copy of my file when I select it with the input control. What's wrong with my code? I got no errors and nothing happens

Answer 1

The " modern " API is called File System Access , it is still only a proposal, but is expected to supersede the previous and deprecated File System API , and is already available in Chromium browsers.

To write a file using this API, you first request a FileHandle using the showSaveFilePicker() method, then you can create a writer from that handle and append data using that 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
};

But this API is still overprotected, so it unfortunately can't be ran in cross-origin iframes like the ones used here by StackSnippet or most popular fiddling services. So in order to make a live demo, I had to make a plunker , that you must run in windowed mode .

And if you need to set the name of the file yourself, you need to request for a directory access using showDirectoryPicker() and then to get a FileHandle from that directory handle using its getFileHandle() method. plnkr

Answer 2

The documentation states that this method is non-standard, only in Chrome and already deprecated:

Even compared to the rest of the File and Directory Entries API, requestFileSystem() is especially non-standard; only Chrome implements it, and all other browser makers have decided that they will not implement it. It has even been removed from the proposed specification. Do not use this method!

You should not use this.