1- # File Selector
1+ # file-selector
22
33> 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.
44
55[ ![ 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 )
810
911# Table of Contents
1012
1315* [ Browser Support] ( #browser-support )
1416* [ Contribute] ( #contribute )
1517* [ Credits] ( #credits )
18+ * [ Support] ( #support )
19+ * [ License] ( #license )
1620
1721
18- ### Installation
19- ----------------
22+ ## Installation
2023You can install this package from [ NPM] ( https://www.npmjs.com ) :
2124``` bash
2225npm add file-selector
@@ -27,7 +30,7 @@ Or with [Yarn](https://yarnpkg.com/en):
2730yarn add file-selector
2831```
2932
30- #### CDN
33+ ### CDN
3134For CDN, you can use [ unpkg] ( https://unpkg.com ) :
3235
3336[ 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 => {
4245```
4346
4447
45- ### Usage
46- ---------
48+ ## Usage
4749
48- #### ES6
50+ ### ES6
4951Convert a [ DragEvent] ( https://developer.mozilla.org/en-US/docs/Web/API/DragEvent ) to File objects:
5052``` ts
5153import {fromEvent } from ' file-selector' ;
@@ -77,7 +79,7 @@ console.log(files);
7779```
7880** NOTE** The above is experimental and subject to change.
7981
80- #### CommonJS
82+ ### CommonJS
8183Convert a ` DragEvent ` to File objects:
8284``` ts
8385const {fromEvent} = require (' file-selector' );
@@ -88,8 +90,7 @@ document.addEventListener('drop', async evt => {
8890```
8991
9092
91- ### Browser Support
92- -------------------
93+ ## Browser Support
9394Most browser support basic File selection with drag 'n' drop or file input:
9495* [ File API] ( https://developer.mozilla.org/en-US/docs/Web/API/File#Browser_compatibility )
9596* [ 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/
105106* [ FileSystemDirectoryReader.readEntries()] ( https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#Browser_compatibility )
106107
107108
108- ### Contribute
109- --------------
109+ ## Contribute
110110If you wish to contribute, please use the following guidelines:
111111* Use [ Conventional Commits] ( https://conventionalcommits.org )
112112* Use ` [ci skip] ` in commit messages to skip a build
113113
114-
115- ### Credits
116- -----------
114+ ## Credits
117115* [ 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