Search code examples
javascriptsingle-page-applicationdraw.io

Implement autosave from browser to device with only one dialog prompt

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.
Solution

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