HTML DIR CONTENT
(recursively) iterate directory entries in the browser (html5 File System API)
Install
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>
API
-
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.
-
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.
note: The order of files returned is not guaranteed to be in same order the files on the file system are organized
Example
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)
.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
Dependencies
Requires global Promise object to be available
Works on Chrome, Firefox and Edge (no support on IE11 or Safari)