0

I believe it would not be possible due to security reason as stated in many other articles on StackOverflow. However, when I use the Diagram app at https://app.diagrams.net/ I realized they could ask me to save a file, and somehow keep that file reference and whenever I click Save on the app, my local file on hard drive changes (no new download).

I know it's only possible to upload/download a file and believe you cannot edit it (using Blob with FileReader etc). How do they achieve that? The app is open source but unfortunately plowing through the source code of their File Handler I still cannot find out what API they are using. I don't remember installing any plugin or app in my browser.

I also notice there is this permission in my browser so I guess it's some standard API, but even using that as keyword, all leads back to StackOverflow articles saying it's not possible.

enter image description here

Is it a new API I am not aware of? What am I looking for?

Luke Vo
  • 17,859
  • 21
  • 105
  • 181
  • Do you mean FileSaver.js? localStorage is another way you could try to do it – ControlAltDel Nov 09 '20 at 03:43
  • Nope, `localStorage` does not create a physical file or let user choose where it is. They create real file on hard drive (i.e `test.drawio` is a XML text file) – Luke Vo Nov 09 '20 at 03:46
  • About FileSaver.js I am not sure but a quick look at their API, look like their only function is to create and download a file, not edit them? I may be wrong though. – Luke Vo Nov 09 '20 at 03:50
  • Using FileSaver.js if you have the file loaded and you make changes you can save those changes back to the file system with FileSaver.js (via a 'Save' dialog). Does this match the behavior you are seeing? – ControlAltDel Nov 09 '20 at 03:56
  • Not sure if it's the same thing but I tried some of their demo pages, all of them simply save using the browser's setting which I can achieve using standard Javascript. Also the permission didn't show up like screenshot above. – Luke Vo Nov 09 '20 at 04:05

1 Answers1

2

You can use localStorage to achieve this without needing any other permission from the user.

localStorage.setItem("data", JSON.stringify(data));

If your data is just JSON then this would work, however if you have custom data types, you can take a look here.

Edit:

Since you wanted to save the file directly to the device and edit it, you can take a look at File System Access API. This article here explains it.

You can load the file first by using,

let fileHandle;
butOpenFile.addEventListener('click', async () => {
  [fileHandle] = await window.showOpenFilePicker();
  const file = await fileHandle.getFile();
  const contents = await file.text();
  textArea.value = contents;
});

Once you have the file handle you should be able to write to the file without requesting to download a new file everytime there is a change.

async function writeFile(fileHandle, contents) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Write the contents of the file to the stream.
  await writable.write(contents);
  // Close the file and write the contents to disk.
  await writable.close();
}

The codes are from the article I have linked above and the article explains everything much clearly. It's worth reading.

kks21199
  • 1,116
  • 2
  • 10
  • 29
  • Nope, `localStorage` does not create a physical file or let user choose where it is. They create real file on hard drive (i.e test.drawio is a XML text file). Also `localStorage` has a limit of 5MB as well on most browsers as well. – Luke Vo Nov 09 '20 at 03:47
  • Have you looked at the File System Access API? – kks21199 Nov 09 '20 at 03:55
  • 1
    Ah yes, it's the FileSystem API. Can confirm it has the same behavior. Now I notice it does not work in Firefox. For the app when running on Firefox they fall back to the default browser behavior (i.e new download on save). – Luke Vo Nov 09 '20 at 04:07