This is a <file-tree>

The element:

You can click files, drag files and directories around, create, rename, and delete files and directories, and you can upload files or entire folders from your device (which, because this file tree isn't backed by anything, just means you see your filenames show up in the tree, there is no data associated with them on this page).

The HTML that made the above work:

It's an HTML element. The code is identical to other HTML elements, in that you just write the tag and give it a source URL for the content:

<file-tree src="..."></file-tree>

Or generate a file-tree element on the JS side:

const tree = document.createElement(`file-tree`);
tree.setAttribute(`src`, `https://example.com/some-url-for/content`);
// or
tree.setContent([`a`, `list.of`, `file.paths`]);
document.body.appendchild(tree);

And that's all you need as far as the page code is concerned.

In this case we've also specified two extra attributes:

<file-tree src="..." show-top-level="true" remove-empty-dir="true"></file-tree>

The show-top-level attribute shows the normally hidden . directory that everything lives under, and the remove-empty-dir attribute makes the file tree delete any directory that becomes empty when deleting the last entry it contains.

The JS that made the above work:

On th JS side, we get a reference to our file tree element, and then pass it a list of file paths, as an array of strings. Then, in order to make sure that you can see the tree "working", we set up event listeners for all permission events the file tree generates, granting them immediately.

// Add <file-tree> to our page and grab the element
import "../dist/file-tree.esm.js";
const fileTree = document.querySelector(`file-tree`);

// Then listen for, and grant every, file tree event:
const eventList = [
  // The main event your users care about
  `file:click`,
  // File events you care about
  `file:create`,
  `file:rename`,
  `file:move`,
  `file:delete`,
  // Directory events your users care about
  `dir:click`,
  `dir:toggle`,
  // Directory events you care about
  `dir:create`,
  `dir:rename`,
  `dir:move`,
  `dir:delete`,
];

eventList.forEach((type) =>
  fileTree.addEventListener(type, ({ detail }) => detail.grant())
);

Is there a list of events?

Of course. Click the link to head on over to the project page for the list of events and a description of what data they come with that you can use make permission decisions with.

Lift the hood!

If you "view-source" this page, you'll see there's nothing special going on in the HTML, and viewing the page JS should show the same code as listed above.

For more information, head on over to its project page on GitHub, which has more detailed instructions on how to use this element, and how to work with th events it generates.

— Pomax