[Feature Request] Implement File System API

[CiberNin]

• Add file menu button to top of left toolbar.
• A little HR to separate it from the other buttons.
• Dropdown options:
  • Open
    • should this insert into current instance? What if user wants to create a new instance? Obviously they can open a new tab, but in PWA mode I think it might be bad practice to make the user open a new instance of the program. Maybe add an explicit New button?
    • So either have New and Open or have Open and Import?
    • Only want to save the file handle from the first open. Assume thats the base file user wants to save to.
  • Save ( shortcut ctrl-s )
  • Save As
    • Maybe still have export to downloads as an option? Not sure if filesystem api is ever unavailable. Can't see why anyone would want to use download option when filesystem is avaliable since with downloads you can't set file type and it keeps creating copies.
• Either way, remove Export To section from main panel and tuck options either into Save As filetype selector or as File dropdown options.

https://developer.mozilla.org/en-US/docs/Web/API/File_System_API

Will need to keep track of file handle to save to. Starts out null, then gets remembered on first open. Need to grey out save options before first open since we won't have a handle yet. On save-as need to overwrite file handle with new one in case it changed and also remember file type.

Also need to handle when used a PWA default file handler.

Loading file example:

const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

async function getTheFile() {
  // Open file picker and destructure the result the first handle
  const [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // get file contents
  const fileData = await fileHandle.getFile();
}

Saving file example:

async function saveFile() {
  // create a new handle
  const newHandle = await window.showSaveFilePicker();

  // create a FileSystemWritableFileStream to write to
  const writableStream = await newHandle.createWritable();

  // write our file
  await writableStream.write(imgBlob);

  // close the file and write the contents to disk.
  await writableStream.close();
}

[slimbuck]

Hi @CiberNin ,

This is great timing. We're busy planning our next round of updates to supersplat and among other things would like to support for offline mode and file system handling. (And also the ability to combine multiple splats).

So thanks very much for this!

[slimbuck]

This was done in #105 and is now deployed.