File System Access Backend

[DustinBrett]

This is my attempt to use the File System Access API as a backend for BrowserFS. I'm open to any comments/suggestions. I avoided async/await as the build command started complaining about generators. Currently this supports rename, writeFile, stat, exists, readFile, unlink, rmdir, mkdir & readdir. To get the types working I needed to add @types/wicg-file-system-access and upgrade typescript.

Usage:

type IFileSystemAccess = {
  FileSystem: {
    FileSystemAccess: {
      Create: (
        opts: { handle: FileSystemDirectoryHandle },
        cb: BFSCallback<FileSystem>
      ) => void;
    };
  };
};

To get the handle you need to call:

const handle = await window.showDirectoryPicker();

[aminya]

@DustinBrett could you publish this on npm? This project seems unmaintained.

[DustinBrett]

@aminya I could but I would rather this repo be able to continue. @jvilk are there plans to continue maintenance of this repo? It's a great project and a core part of my side project as I imagine it would be for others as well.

Also I think this specific PR may need to evolve as the File System Access API still seems to be in a bit of flux, although it's recently gotten more standardized and added to Safari.

• https://webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system/

[DustinBrett]

I recently had an interest in OPFS (Origin private file system) and realized that it was nearly compatible with the PR I already had. I did a commit (https://github.com/jvilk/BrowserFS/pull/321/commits/bf30f1da67474904b41b52b79d092ed199a4611a) today to allow it to fully mount as a writeable filesystem that can work in an overlay fs.

I won't be using it by default in my project with OPFS instead of IndexedDb because it has other limits such as not allowing the making of .url files. But I wanted to mention I have added this feature so now this could support OPFS. I also wrote a benchmark and found it interesting that OPFS was not faster. But maybe this could be improved in the code I wrote.

Here is an example config:

{
  fs: "MountableFileSystem",
  options: {
    "/": {
      fs: "OverlayFS",
      options: {
        readable: {
          fs: "HTTPRequest",
          options: { index },
        },
        writable: {
          fs: "FileSystemAccess",
          options: {
            handle: await navigator.storage.getDirectory(),
          },
        },
      },
    },
  },
}

The important part being navigator.storage.getDirectory() which acts similar to window.showDirectoryPicker().

[weihongliang233]

Nice work! Recently I've been working with file trees in the browser. I find node's file api not very easy to use. I found a project https://www.npmjs.com/package/files with a relatively easy to use api. I'm going to make changes to it, merging your fork's features into it. But I don't know how to use it when you don't publish the npm package (I use it now through npm link)