1 | # File Selector
|
2 |
|
3 | > A small package for converting a [DragEvent](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent) or [file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) to a list of File objects.
|
4 |
|
5 | [![npm](https://img.shields.io/npm/v/file-selector.svg?style=flat-square)](https://www.npmjs.com/package/file-selector)
|
6 | [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/react-dropzone/file-selector/Test?label=tests&style=flat-square)](https://github.com/react-dropzone/file-selector/actions?query=workflow%3ATest)
|
7 | [![Coveralls github branch](https://img.shields.io/coveralls/github/react-dropzone/file-selector/master?style=flat-square)](https://coveralls.io/github/react-dropzone/file-selector?branch=master)
|
8 |
|
9 | # Table of Contents
|
10 |
|
11 | * [Installation](#installation)
|
12 | * [Usage](#usage)
|
13 | * [Browser Support](#browser-support)
|
14 | * [Contribute](#contribute)
|
15 | * [Credits](#credits)
|
16 |
|
17 |
|
18 | ### Installation
|
19 | ----------------
|
20 | You can install this package from [NPM](https://www.npmjs.com):
|
21 | ```bash
|
22 | npm add file-selector
|
23 | ```
|
24 |
|
25 | Or with [Yarn](https://yarnpkg.com/en):
|
26 | ```bash
|
27 | yarn add file-selector
|
28 | ```
|
29 |
|
30 | #### CDN
|
31 | For CDN, you can use [unpkg](https://unpkg.com):
|
32 |
|
33 | [https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js](https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js)
|
34 |
|
35 | The global namespace for file-selector is `fileSelector`:
|
36 | ```js
|
37 | const {fromEvent} = fileSelector;
|
38 | document.addEventListener('drop', async evt => {
|
39 | const files = await fromEvent(evt);
|
40 | console.log(files);
|
41 | });
|
42 | ```
|
43 |
|
44 |
|
45 | ### Usage
|
46 | ---------
|
47 |
|
48 | #### ES6
|
49 | Convert a `DragEvent` to File objects:
|
50 | ```ts
|
51 | import {fromEvent} from 'file-selector';
|
52 | document.addEventListener('drop', async evt => {
|
53 | const files = await fromEvent(evt);
|
54 | console.log(files);
|
55 | });
|
56 | ```
|
57 |
|
58 | Convert a file input to File objects:
|
59 | ```ts
|
60 | import {fromEvent} from 'file-selector';
|
61 | const input = document.getElementById('myInput');
|
62 | input.addEventListener('change', async evt => {
|
63 | const files = await fromEvent(evt);
|
64 | console.log(files);
|
65 | });
|
66 | ```
|
67 |
|
68 | #### CommonJS
|
69 | Convert a `DragEvent` to File objects:
|
70 | ```ts
|
71 | const {fromEvent} = require('file-selector');
|
72 | document.addEventListener('drop', async evt => {
|
73 | const files = await fromEvent(evt);
|
74 | console.log(files);
|
75 | });
|
76 | ```
|
77 |
|
78 |
|
79 | ### Browser Support
|
80 | -------------------
|
81 | Most browser support basic File selection with drag 'n' drop or file input:
|
82 | * [File API](https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility)
|
83 | * [Drag Event](https://developer.mozilla.org/en-US/docs/Web/API/DragEvent#Browser_compatibility)
|
84 | * [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#Browser_compatibility)
|
85 | * [`<input type="file">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Browser_compatibility)
|
86 |
|
87 | For folder drop we use the [FileSystem API](https://developer.mozilla.org/en-US/docs/Web/API/FileSystem) which has very limited support:
|
88 | * [DataTransferItem.getAsFile()](https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/getAsFile#Browser_compatibility)
|
89 | * [DataTransferItem.webkitGetAsEntry()](https://developer.mozilla.org/en-US/docs/Web/API/DataTransferItem/webkitGetAsEntry#Browser_compatibility)
|
90 | * [FileSystemEntry](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemEntry#Browser_compatibility)
|
91 | * [FileSystemFileEntry.file()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemFileEntry/file#Browser_compatibility)
|
92 | * [FileSystemDirectoryEntry.createReader()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryEntry/createReader#Browser_compatibility)
|
93 | * [FileSystemDirectoryReader.readEntries()](https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#Browser_compatibility)
|
94 |
|
95 |
|
96 | ### Contribute
|
97 | --------------
|
98 | If you wish to contribute, please use the following guidelines:
|
99 | * Use [Conventional Commits](https://conventionalcommits.org)
|
100 | * Use `[ci skip]` in commit messages to skip a build
|
101 |
|
102 |
|
103 | ### Credits
|
104 | -----------
|
105 | * [html5-file-selector](https://github.com/quarklemotion/html5-file-selector)
|