
Security News
Open Source CAI Framework Handles Pen Testing Tasks up to 3,600× Faster Than Humans
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
custom-file-tree
Advanced tools
This is an HTML custom element for adding file tree visualisation and interaction to your page.
Simply add the element .js and .css files to your page using plain HTML:
<script src="somewhere/file-tree.esm.js" type="module" async></script>
<link rel="stylesheet" href="somewhere/file-tree.css" async />
And then you can work with any <file-tree>
like you would any other HTML element. For example:
// query select, or really any normal way to get an element handle:
const fileTree = document.querySelector(`file-tree`);
// Tell the file tree which files exist
fileTree.setFiles([
`README.md`,
`dist/client.bundle.js`,
`src/server/index.js`,
`LICENSE.md`,
`src/client/index.js`,
`src/server/middleware.js`,
`package.json`,
`dist/client.bundle.min.js`,
]);
After which users can play with the file tree as much as they like: all operations generate "permission-seeking" events, which need to be explicitly granted before the filetree will let them happen, meaning that you have code like:
filetree.addEventListener(`file:rename`, async ({ detail }) => {
const { oldPath, newPath, grant } = detail;
// we'll have the API determine whether this operation is allowed or not:
const result = await api.renameFile(oldPath, newPath);
if (result.error) {
warnUser(`An error occurred trying to rename ${oldPath} to ${newPath}.`);
} else if (result.denied) {
warnUser(`You do not have permission to rename files.`);
} else {
grant();
}
});
Thus ensuring that the file tree stays in sync with your real filesystem (whether that's through an api as in the example, or a client-side )
There is a live demo that shows off the above, with event handling set up to blanket-allow every action a user can take.
Part of the functionality for this element is based on the HTML5 drag-and-drop API (for parts of the file tree itself, as well as dragging files and folders into it from your device), which is notoriously based on "mouse events" rather than "pointer events", meaning there is no touch support out of the box.
However, touch support can be trivially achieved using the following shim, which has its own repository over on https://github.com/pomax/dragdroptouch (which is a fork of https://github.com/Bernardo-Castilho/dragdroptouch, rewritten as a modern ESM with support for autoloading)
<script
src="https://pomax.github.io/dragdroptouch/dist/drag-drop-touch.esm.min.js?autoload"
type="module"
></script>
Load this as first thing on your page, and done: drag-and-drop using touch will now work.
As mentioned above, events are "permission seeking", meaning that they are dispatched before an action is allowed to take place. Your event listener code is responsible for deciding whether or not that action is allowed to take place given the full context of who's performing it on which file/directory.
If an event is not allowed to happen, your code can simply exit the event handler. The file-tree will remain as it was before the user tried to manipulate it.
If an event is allowed to happen, your code must call event.detail.grant()
, which lets the file tree perform the associated action.
Events are listed here as name → detail object content
, with the grant
function omitted from the detail object, as by definition all events come with a grant function.
file:click
→ {path}
,path
representing the full path of the file in question.selected
class to the associated file entry.file:create
→ {path}
,path
being the file's full path.path
value.file:rename
→ {oldPath, newPath}
,oldPath
being the current file path, and newPath
the desired new path.../
) should be effected by just moving the file to the correct directory.file:upload
→ {path, content}
,path
being the file's full path, and content
being the file's content as ArrayBuffer.path
value.file:move
→ {oldPath, newPath}
,oldPath
being the current file path, and newPath
the desired new path.newPath
.file:delete
→ {path}
,path
representing the full path of the file in question.<file-tree>
specifies the remove-empty
attribute, the now empty directory will also be deleted, gated by a dir:delete
permission event, but not gated by a confirm()
dialog to the user.dir:click
→ {path, currentState}
,path
representing the full path of the directory in question, and currentState
reflecting whether this directory is currently visualized as "open"
or "closed"
, determined by whether or not its class list includes the closed
class.closed
class on the associated directory entry.dir:create
→ {path}
,path
being the directory's full path.path
value.dir:rename
→ {oldPath, newPath}
,oldPath
being the current directory path, and newPath
the desired new path.dir:move
→ {oldPath, newPath}
,oldPath
being the current directory path, and newPath
the desired new path.newPath
.dir:delete
→ {path}
,path
representing the full path of the directory in question.confirm()
dialog for the user.File tree tags may also specify a "remove-empty" attribute, i.e.
<file-tree remove-empty></file-tree>
Setting this attribute tells the file tree that it may delete directories that become empty due to file move/delete operations.
File tree elements are not persistent, and may be removed and rebuilt from scratch depending on user actions. This means that if you set a class on a file or directory entry, that class may seem to "get unset" or "disappear" when in reality the entire file or directory entry got deleted and a new one was generated in its place.
<file-tree>
should work, start a discussion over on: https://github.com/Pomax/custom-file-tree/discussions— Pomax
FAQs
Add the custom element to your page context using plain old HTML:
The npm package custom-file-tree receives a total of 0 weekly downloads. As such, custom-file-tree popularity was classified as not popular.
We found that custom-file-tree demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.
Security News
CVEForecast.org uses machine learning to project a record-breaking surge in vulnerability disclosures in 2025.