flat-drop-files - GitLite

KO | EN

gitlite — search

#javascript #llm #golang #machine-learning #rust #linux #nodejs #macos #kubernetes #awesome-list #pytorch #security #mcp #openai

flat-drop-files

(★ 165)

Normalize the DataTransferItems interface from a drop event

파일 탐색기

최종 버전 다운로드 (.zip)

- - test.txt
- a.txt
- b.txt
- index.html
- test.ts
- test.txt
.gitignore
CHANGELOG.md
index.ts
LICENSE
license
package.json
README.md
tsconfig.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/placemark/flat-drop-files

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd flat-drop-files

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @placemarkio/flat-drop-files

The Drag & Drop [dataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer)
interface is powerful, but torturous. It has grown organically and via standards,
and is full of [footguns](https://www.wordsense.eu/footguns/) which make it trivially
easy to mess up.

This is an attempt to make it all "just work." The input is a `dataTransfer.items`
list, and the output is a normalized list of files, with a `handle` property
that's a [FileSystemFileHandle](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileHandle),
and a `path` property that's a reconstructed relative file path.

This module takes care of:

- Recursively collecting files within directories
- Reassembling paths of nested files
- Paging through directories with over 100 files
- Ignoring [junk](https://github.com/sindresorhus/junk) files like `.DS_Store`

This is at the bleeding edge of the web, so there are some caveats.

- TypeScript does not support `FileSystemFileHandle` objects yet. This module
  includes the `@types/wicg-file-system-access` module to polyfill that type until
  it is properly introduced.
  
### Installation

This module is [published on npm as @placemarkio/flat-drop-files](https://www.npmjs.com/package/@placemarkio/flat-drop-files).

### Example

```ts
import { getFilesFromDataTransferItems } from "@placemarkio/flat-drop-files";

const zone = document.getElementById('zone');

zone.addEventListener("dragenter", (e) => {
  e.preventDefault();
});

zone.addEventListener("dragover", (e) => {
  e.preventDefault();
});

zone.addEventListener("drop", (e) => {
  e.preventDefault();
  getFilesFromDataTransferItems(e.dataTransfer.items).then(files => {
    console.log(files);
  });
});
```

### Compatibility

This module is compatible with modern browsers: the baseline is browsers
that support [webkitGetAsEntry](https://caniuse.com/mdn-api_datatransferitem_webkitgetasentry).
It does not support IE11 or any other ancient browsers.

### Ecosystem

The [browser-fs-access](https://github.com/GoogleChromeLabs/browser-fs-access) module
is highly recommended to work with the file objects returned by this module:
with it, you can write back to the files using the `file.handle` property.

### Source

This is inspired by [datatransfer-files-promise](https://github.com/anatol-grabowski/datatransfer-files-promise),
contains collected lessons from [dropzone](https://github.com/dropzone/dropzone),
and adapts its junk-file detection from Sindre Sorhus's excellent [junk](https://github.com/sindresorhus/junk) module.

### Testing

This kind of module is exceptionally hard to test with automated tests. Thus, there's a manual test suite. Start the
test suite with `yarn start`, which will boot up a local server, and follow the instructions, which involve dragging & dropping
particular files and folders into the browser.

### Comments

You'll find plenty of comments in `index.ts` about different gotchas and traps in the DataTransferItem, FileSystemEntry, and other APIs. It's unfortunately easy to get these things wrong, whether it's assuming that [DataTransferItem.kind](https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/kind) will correctly identify a directory, or forgetting to call `readEntries` on a directory reader repeatedly to page through each 100-item batch of files.