# input-files-to-tree

> > 上传的文件夹或多个文件转化成树状结构数据

Latest version **1.0.0-alpha.2** (published 2021-12-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install input-files-to-tree
pnpm add input-files-to-tree
yarn add input-files-to-tree
bun add input-files-to-tree
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.2 |
| Published | 2021-12-20 |
| First published | 2021-12-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | unzoa |
| Keywords | input, webkitdirectory, fullpath, tree, treeData, files |

## Links

- npm: https://www.npmjs.com/package/input-files-to-tree
- Repository: https://github.com/unzoa/FileTree
- Homepage: https://github.com/unzoa/FileTree#readme
- Issues: https://github.com/unzoa/FileTree/issues
- npm.io page: https://npm.io/package/input-files-to-tree

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.0.0-alpha.2 (latest) — 2021-12-20
- 1.0.0-alpha.1 — 2021-12-20

## README

# treeify

> 上传的文件夹或多个文件转化成树状结构数据


## 安装

```bash
npm i input-files-to-tree
```

## 使用

```html
<input type="file" name="" webkitdirectory id="files">
```

### 基本使用

```js
import treeify from './filesPathTransformToTree.js'

document.getElementById('files').onchange = e => {
  const tar = Array.from(e.target.files)
  const d = treeify(tar)

  console.log(d)
}
```

#### 输出

```js
{
	"treeData": [{
		"id": 2,
		"fullPath": "testFolder-1",
		"label": "testFolder-1",
		"children": [{
			"id": 3,
			"fullPath": "testFolder-1/.DS_Store",
			"label": ".DS_Store",
			"children": []
		}, {
			"id": 4,
			"fullPath": "testFolder-1/1.txt",
			"label": "1.txt",
			"children": []
		}, {
			"id": 5,
			"fullPath": "testFolder-1/2",
			"label": "2",
			"children": [{
				"id": 6,
				"fullPath": "testFolder-1/2/.DS_Store",
				"label": ".DS_Store",
				"children": []
			}, {
				"id": 7,
				"fullPath": "testFolder-1/2/2.txt",
				"label": "2.txt",
				"children": []
			}, {
				"id": 8,
				"fullPath": "testFolder-1/2/3",
				"label": "3",
				"children": [{
					"id": 9,
					"fullPath": "testFolder-1/2/3/.DS_Store",
					"label": ".DS_Store",
					"children": []
				}, {
					"id": 10,
					"fullPath": "testFolder-1/2/3/3.txt",
					"label": "3.txt",
					"children": []
				}, {
					"id": 11,
					"fullPath": "testFolder-1/2/3/4",
					"label": "4",
					"children": [{
						"id": 12,
						"fullPath": "testFolder-1/2/3/4/4.txt",
						"label": "4.txt",
						"children": []
					}]
				}]
			}]
		}]
	}],
	"treeNodelength": 12
}
```


### 节点增加额外数据

```js
import treeify from './filesPathTransformToTree.js'

document.getElementById('files').onchange = e => {
  const tar = Array.from(e.target.files).map(i => {
    i.externalData = {newKey_1: "val_1"} // 额外数据需要是个对象
    return i
  })

  const d = treeify(tar)

  console.log(d)
}
```

#### 输出

```js
{
	"treeData": [{
		"id": 2,
		"fullPath": "testFolder-1",
		"label": "testFolder-1",
		"children": [...]
    "newKey_1": "val_1"
  }]
  ...
}

---
_Source: https://npm.io/package/input-files-to-tree · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._