How to create file in the local fs using modern FileApi?

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

I can't reproduce the problem of it failing silently. It provides a very clear and obvious error when I trigger that function. — Quentin, Nov 27 '20 at 08:05

Kaiido · Accepted Answer · 2020-11-27T09:03:57.240

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

edited Nov 27 '20 at 09:03

answered Nov 27 '20 at 08:43

Kaiido

123,334
13
219
285

Does any solution exist to write a file locally at least in Chrome browser? – mystdeim Nov 27 '20 at 08:57
@mystdeim did you read this answer? Yes such a solution exists, the code in there does just that. – Kaiido Nov 27 '20 at 09:01
I add window. before showSaveFilePicker in your sample and it works, thanks! – mystdeim Nov 27 '20 at 11:36
btw, I didn't find possibility to pass a custom filename to showSaveFilePicker. – mystdeim Nov 27 '20 at 12:00
@mystdeim ... it's also in the answer, check the second plnkr – Kaiido Nov 27 '20 at 13:42

score 0 · Answer 2 · answered Nov 27 '20 at 08:01

0

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.

answered Nov 27 '20 at 08:01

emi

2,786
1
16
24

actually, it's not a problem for me – mystdeim Nov 27 '20 at 08:27

How to create file in the local fs using modern FileApi?

2 Answers2