
Security News
Browserslist-rs Gets Major Refactor, Cutting Binary Size by Over 1MB
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
html-dir-content
Advanced tools
(recursively) iterate directory entries in the browser (html5 File System API)
(recursively) iterate directory entries in the browser (html5 File System API)
In Node/Webpack environment:
npm i html-dir-content
OR
yarn add html-dir-content
Directly in the browser:
<script src="https://unpkg.com/html-dir-content/dist/html-dir-content.min.js"></script>
getFiles(item:DataTransferItem, options?: Options) : Promise<Array>
Returns a promise of an array of files in case the provided item represents a directory and the FS API returns children files for it.
Options: Boolean | Object
(In case of boolean value, it will be used for the recursive config)
getFilesFromDragEvent(evt: DragEvent, options?: Options)
Returns a promise of an array of files for the given event. In case the event dataTransfer property contains file system entries and at least one of them is represents a directory and the FS API returns children files for it.
Options: Boolean | Object
(In case of boolean value, it will be used for the recursive config)
note: The order of files returned is not guaranteed to be in same order the files on the file system are organized
note: Firefox will turn any path delimiter (/) in the File name property to ":" (when using 'withFullPath') :( - So in case you need to parse/save the path you can use the custom 'hdcFullPath' prop on the File object or replace the colons with slashes if needed.
check out this codepen.
your HTML:
<script src="<path-to-node_modules>/html-dir-content/dist/html-dir-content.min.js"></script>
your Javascript:
window.addEventListener("drop", (e) => {
e.preventDefault();
htmlDirContent.getFilesFromDragEvent(e, true) //will perform recusrive traversal
.then((files) => {
console.log("we have the files: ", files);
});
});
or with import/require:
import {getFilesFromDragEvent} from "html-dir-content";
.
.
.
getFilesFromDragEvent(e, true)
.then((files) => {
});
You can drag a directory (ex: from File Explorer / Finder) and the resolved files array will contain the files contained within it and its sub folders
Requires global Promise object to be available
Works on Chrome, Firefox, Safari (at least from version 13), and Edge (no support on IE11)
FAQs
(recursively) iterate directory entries in the browser (html5 File System API)
The npm package html-dir-content receives a total of 11,738 weekly downloads. As such, html-dir-content popularity was classified as popular.
We found that html-dir-content demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer 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
Browserslist-rs now uses static data to reduce binary size by over 1MB, improving memory use and performance for Rust-based frontend tools.
Research
Security News
Eight new malicious Firefox extensions impersonate games, steal OAuth tokens, hijack sessions, and exploit browser permissions to spy on users.
Security News
The official Go SDK for the Model Context Protocol is in development, with a stable, production-ready release expected by August 2025.