1
- # File Selector
1
+ # file-selector
2
2
3
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
4
5
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 )
6
+ [ ![ Tests] ( 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
+ [ ![ codecov] ( 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
+ [ ![ Open Collective Backers] ( https://img.shields.io/opencollective/backers/react-dropzone.svg?style=flat-square )] ( #backers )
9
+ [ ![ Open Collective Sponsors] ( https://img.shields.io/opencollective/sponsors/react-dropzone.svg?style=flat-square )] ( #sponsors )
8
10
9
11
# Table of Contents
10
12
13
15
* [ Browser Support] ( #browser-support )
14
16
* [ Contribute] ( #contribute )
15
17
* [ Credits] ( #credits )
18
+ * [ Support] ( #support )
19
+ * [ License] ( #license )
16
20
17
21
18
- ### Installation
19
- ----------------
22
+ ## Installation
20
23
You can install this package from [ NPM] ( https://www.npmjs.com ) :
21
24
``` bash
22
25
npm add file-selector
@@ -27,7 +30,7 @@ Or with [Yarn](https://yarnpkg.com/en):
27
30
yarn add file-selector
28
31
```
29
32
30
- #### CDN
33
+ ### CDN
31
34
For CDN, you can use [ unpkg] ( https://unpkg.com ) :
32
35
33
36
[ https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js ] ( https://unpkg.com/file-selector/dist/bundles/file-selector.umd.min.js )
@@ -42,10 +45,9 @@ document.addEventListener('drop', async evt => {
42
45
```
43
46
44
47
45
- ### Usage
46
- ---------
48
+ ## Usage
47
49
48
- #### ES6
50
+ ### ES6
49
51
Convert a [ DragEvent] ( https://developer.mozilla.org/en-US/docs/Web/API/DragEvent ) to File objects:
50
52
``` ts
51
53
import {fromEvent } from ' file-selector' ;
@@ -77,7 +79,7 @@ console.log(files);
77
79
```
78
80
** NOTE** The above is experimental and subject to change.
79
81
80
- #### CommonJS
82
+ ### CommonJS
81
83
Convert a ` DragEvent ` to File objects:
82
84
``` ts
83
85
const {fromEvent} = require (' file-selector' );
@@ -88,8 +90,7 @@ document.addEventListener('drop', async evt => {
88
90
```
89
91
90
92
91
- ### Browser Support
92
- -------------------
93
+ ## Browser Support
93
94
Most browser support basic File selection with drag 'n' drop or file input:
94
95
* [ File API] ( https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility )
95
96
* [ Drag Event] ( https://developer.mozilla.org/en-US/docs/Web/API/DragEvent#Browser_compatibility )
@@ -105,13 +106,45 @@ For folder drop we use the [FileSystem API](https://developer.mozilla.org/en-US/
105
106
* [ FileSystemDirectoryReader.readEntries()] ( https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#Browser_compatibility )
106
107
107
108
108
- ### Contribute
109
- --------------
109
+ ## Contribute
110
110
If you wish to contribute, please use the following guidelines:
111
111
* Use [ Conventional Commits] ( https://conventionalcommits.org )
112
112
* Use ` [ci skip] ` in commit messages to skip a build
113
113
114
-
115
- ### Credits
116
- -----------
114
+ ## Credits
117
115
* [ html5-file-selector] ( https://github.com/quarklemotion/html5-file-selector )
116
+
117
+ ## Support
118
+
119
+ ### Backers
120
+ Support us with a monthly donation and help us continue our activities. [[ Become a backer] ( https://opencollective.com/react-dropzone#backer )]
121
+
122
+ <a href =" https://opencollective.com/react-dropzone/backer/0/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/0/avatar.svg " ></a >
123
+ <a href =" https://opencollective.com/react-dropzone/backer/1/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/1/avatar.svg " ></a >
124
+ <a href =" https://opencollective.com/react-dropzone/backer/2/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/2/avatar.svg " ></a >
125
+ <a href =" https://opencollective.com/react-dropzone/backer/3/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/3/avatar.svg " ></a >
126
+ <a href =" https://opencollective.com/react-dropzone/backer/4/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/4/avatar.svg " ></a >
127
+ <a href =" https://opencollective.com/react-dropzone/backer/5/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/5/avatar.svg " ></a >
128
+ <a href =" https://opencollective.com/react-dropzone/backer/6/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/6/avatar.svg " ></a >
129
+ <a href =" https://opencollective.com/react-dropzone/backer/7/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/7/avatar.svg " ></a >
130
+ <a href =" https://opencollective.com/react-dropzone/backer/8/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/8/avatar.svg " ></a >
131
+ <a href =" https://opencollective.com/react-dropzone/backer/9/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/9/avatar.svg " ></a >
132
+ <a href =" https://opencollective.com/react-dropzone/backer/10/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/backer/10/avatar.svg " ></a >
133
+
134
+ ### Sponsors
135
+ Become a sponsor and get your logo on our README on Github with a link to your site. [[ Become a sponsor] ( https://opencollective.com/react-dropzone#sponsor )]
136
+
137
+ <a href =" https://opencollective.com/react-dropzone/sponsor/0/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/0/avatar.svg " ></a >
138
+ <a href =" https://opencollective.com/react-dropzone/sponsor/1/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/1/avatar.svg " ></a >
139
+ <a href =" https://opencollective.com/react-dropzone/sponsor/2/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/2/avatar.svg " ></a >
140
+ <a href =" https://opencollective.com/react-dropzone/sponsor/3/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/3/avatar.svg " ></a >
141
+ <a href =" https://opencollective.com/react-dropzone/sponsor/4/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/4/avatar.svg " ></a >
142
+ <a href =" https://opencollective.com/react-dropzone/sponsor/5/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/5/avatar.svg " ></a >
143
+ <a href =" https://opencollective.com/react-dropzone/sponsor/6/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/6/avatar.svg " ></a >
144
+ <a href =" https://opencollective.com/react-dropzone/sponsor/7/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/7/avatar.svg " ></a >
145
+ <a href =" https://opencollective.com/react-dropzone/sponsor/8/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/8/avatar.svg " ></a >
146
+ <a href =" https://opencollective.com/react-dropzone/sponsor/9/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/9/avatar.svg " ></a >
147
+ <a href =" https://opencollective.com/react-dropzone/sponsor/10/website " target =" _blank " ><img src =" https://opencollective.com/react-dropzone/sponsor/10/avatar.svg " ></a >
148
+
149
+ ## License
150
+ MIT
0 commit comments