HTML DIR CONTENT


(recursively) iterate directory entries in the browser (html5 File System API)

$3

In Node/Webpack environment:
``
npm i html-dir-content
OR
yarn add html-dir-content
`

Directly in the browser:
`

`

$3

* 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.

$3

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

$3

Requires global Promise object to be available

> Works on Chrome, Firefox, Safari (at least from version 13), and Edge (no support on IE11)