2

In a site I'm implementing, users save files on their local device. I want to implement autosave, but questions like this one convinced me it wasn't possible without a "File Save" dialog for every write to the file system (unless the user modifies their default browser settings).

However, I see that app.diagrams.net does it! Once I specify a file path via an initial dialog my edits are autosaved without additional dialogs. That project is open-source, but my efforts to find the relevant code have so far not succeeded.

Anybody know how it's done?

Here are the steps to demonstrate that it's possible:

  1. Browse to app.diagrams.net
  2. In the "Save diagrams to" dialog, choose "Device"
  3. "Create New Diagram"
  4. "Create"
  5. In the "Save as" dialog, enter a filename
  6. Make some edits
  7. Reload the page
  8. "Open Existing Diagram"
  9. In the "Open" dialog, choose your file - it opens with your autosaved edits.
Rick Mohr
  • 1,821
  • 1
  • 19
  • 22

1 Answers1

3

A quick glance at the source and the apps.diagram.net is using the File System Access API to write to the file system. If you keep the file handle around it will let you continue to create a writeable against it. It requires that things are running from a secure context (https) to work.

Here's a simplified example:

var fHnd = null;
var counter = 0;
var autoSaveOn = true;

window.onload = function() {

  var autoSave = async function() {
    if (autoSaveOn) {
      counter++;
      document.getElementById('status').innerHTML = 'Saving...'
      const writable = await fHnd.createWritable();
      await writable.write(counter);
      await writable.close();
      document.getElementById('status').innerHTML = '';
      window.setTimeout(autoSave, 3000);
    }
  }

  document.getElementById('btnAutoSave').addEventListener('click', async() => {
    if (autoSaveOn) {
      autoSaveOn = false;
      document.getElementById('btnAutoSave').innerHTML = 'Turn autosave on';
    } else {
      autoSaveOn = true;
      document.getElementById('btnAutoSave').innerHTML = 'Turn autosave off';
      await autoSave();
    }
  });

  document.getElementById('btnCreateFile').addEventListener('click', async() => {
    fHnd = await window.showSaveFilePicker({
      types: [{
        description: 'Text Files',
        accept: {
          'text/plain': ['.txt']
        }
      }]
    });
    document.getElementById('btnCreateFile').style.display = 'none';
    document.getElementById('btnAutoSave').style.display = 'block';

    await autoSave();
  });

}

<!doctype html>
<html>

<head>
  <script language="javascript" src="./sample.js"></script>
</head>

<body>
  <button id="btnCreateFile">Save to file</button>
  <p id="status"></p>
  <button id="btnAutoSave" style="display: none">Turn autosave off</button>
</body>

</html>
clockwatcher
  • 3,193
  • 13
  • 13
  • Thanks! Looks like browser support is spotty (https://caniuse.com/native-filesystem-api) … and trying https://app.diagrams.net on Safari (which doesn't support the API) I see there's a different UI requiring two clicks per save. Oh well, getting there. – Rick Mohr Oct 11 '21 at 00:15
  • Looks to me like a well-realized Google experiment, supported in Chromium browsers (Chrome, Edge, Opera) but not likely to be supported elsewhere. The spec (https://wicg.github.io/file-system-access) says "It is not a W3C Standard nor is it on the W3C Standards Track." – Rick Mohr Oct 11 '21 at 02:27