You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

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