(recursively) iterate directory entries in the browser (html5 File System API)
npm install html-dir-content


(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:
``
* getFiles(item:DataTransferItem, options?: Options) : Promise
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)
- recursive (default: false) - whether to recursively follow the dir structure
- bail (default: 1000) - how many levels to follow recursively before bailing
- withFullPath (default: false) - file names contain the full file path
* 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)
- recursive (default: false) - whether to recursively follow the dir structure
- bail (default: 1000) - how many levels to follow recursively before bailing
- withFullPath (default: false) - file names contain the full file path
> 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:
` html`
your Javascript:
` 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:
` javascript
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)