react-dropzone 4.0.0 → 4.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.babelrc +1 -1
- package/.eslintrc +6 -4
- package/.travis.yml +1 -3
- package/README.md +33 -6
- package/dist/index.js +938 -844
- package/dist/index.js.map +1 -1
- package/examples/Basic/Readme.md +42 -0
- package/package.json +27 -25
- package/src/__snapshots__/index.spec.js.snap +3 -3
- package/src/index.js +90 -67
- package/src/index.spec.js +146 -37
- package/src/utils/index.js +43 -0
- package/src/{getDataTransferItems.spec.js → utils/index.spec.js} +8 -8
- package/src/utils/styles.js +23 -0
- package/webpack.config.js +2 -5
- package/yarn.lock +2382 -1403
- package/src/getDataTransferItems.js +0 -17
package/.babelrc
CHANGED
package/.eslintrc
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"extends": [
|
|
3
|
-
"okonet"
|
|
3
|
+
"okonet",
|
|
4
|
+
"prettier"
|
|
5
|
+
],
|
|
6
|
+
"plugins": [
|
|
7
|
+
"prettier"
|
|
4
8
|
],
|
|
5
9
|
"rules": {
|
|
6
10
|
// React
|
|
@@ -13,9 +17,7 @@
|
|
|
13
17
|
]
|
|
14
18
|
}
|
|
15
19
|
],
|
|
16
|
-
|
|
17
|
-
// a11y
|
|
18
|
-
"jsx-a11y/no-static-element-interactions": 0,
|
|
20
|
+
"react/require-default-props": 0,
|
|
19
21
|
|
|
20
22
|
// Import
|
|
21
23
|
"import/no-extraneous-dependencies": [
|
package/.travis.yml
CHANGED
package/README.md
CHANGED
|
@@ -1,14 +1,18 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
# react-dropzone
|
|
4
4
|
|
|
5
|
-
[](https://travis-ci.org/react-dropzone/react-dropzone) [](https://badge.fury.io/js/react-dropzone) [](https://codecov.io/gh/react-dropzone/react-dropzone) [](#backers)
|
|
6
6
|
[](#sponsors)
|
|
7
7
|
|
|
8
8
|
Simple HTML5-compliant drag'n'drop zone for files built with React.js.
|
|
9
9
|
|
|
10
10
|
Documentation and examples: https://react-dropzone.js.org
|
|
11
|
-
Source code: https://github.com/
|
|
11
|
+
Source code: https://github.com/react-dropzone/react-dropzone/
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
**Looking for maintainers: https://github.com/react-dropzone/react-dropzone/issues/479**
|
|
12
16
|
|
|
13
17
|
---
|
|
14
18
|
|
|
@@ -19,18 +23,22 @@ Install it from npm and include it in your React build process (using [Webpack](
|
|
|
19
23
|
```bash
|
|
20
24
|
npm install --save react-dropzone
|
|
21
25
|
```
|
|
26
|
+
or:
|
|
27
|
+
```bash
|
|
28
|
+
yarn add react-dropzone
|
|
29
|
+
```
|
|
22
30
|
|
|
23
31
|
## Usage
|
|
24
32
|
|
|
25
33
|
Import `Dropzone` in your React component:
|
|
26
34
|
|
|
27
|
-
```javascript
|
|
35
|
+
```javascript static
|
|
28
36
|
import Dropzone from 'react-dropzone'
|
|
29
37
|
```
|
|
30
38
|
|
|
31
39
|
and specify the `onDrop` method that accepts two arguments. The first argument represents the accepted files and the second argument the rejected files.
|
|
32
40
|
|
|
33
|
-
```javascript
|
|
41
|
+
```javascript static
|
|
34
42
|
function onDrop(acceptedFiles, rejectedFiles) {
|
|
35
43
|
// do stuff with files...
|
|
36
44
|
}
|
|
@@ -44,7 +52,7 @@ Using `react-dropzone` is similar to using a file form field, but instead of get
|
|
|
44
52
|
|
|
45
53
|
Specifying the `onDrop` method, provides you with an array of [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) which you can then send to a server. For example, with [SuperAgent](https://github.com/visionmedia/superagent) as a http/ajax library:
|
|
46
54
|
|
|
47
|
-
```javascript
|
|
55
|
+
```javascript static
|
|
48
56
|
onDrop: acceptedFiles => {
|
|
49
57
|
const req = request.post('/upload');
|
|
50
58
|
acceptedFiles.forEach(file => {
|
|
@@ -54,6 +62,25 @@ Specifying the `onDrop` method, provides you with an array of [Files](https://de
|
|
|
54
62
|
}
|
|
55
63
|
```
|
|
56
64
|
|
|
65
|
+
**Warning**: On most recent browsers versions, the files given by `onDrop` won't have properties `path` or `fullPath`, see [this SO question](https://stackoverflow.com/a/23005925/2275818) and [this issue](https://github.com/react-dropzone/react-dropzone/issues/477).
|
|
66
|
+
If you want to access file content you have to use the [FileReader API](https://developer.mozilla.org/en-US/docs/Web/API/FileReader).
|
|
67
|
+
|
|
68
|
+
```javascript static
|
|
69
|
+
onDrop: acceptedFiles => {
|
|
70
|
+
acceptedFiles.forEach(file => {
|
|
71
|
+
const reader = new FileReader();
|
|
72
|
+
reader.onload = () => {
|
|
73
|
+
const fileAsBinaryString = reader.result;
|
|
74
|
+
// do whatever you want with the file content
|
|
75
|
+
};
|
|
76
|
+
reader.onabort = () => console.log('file reading was aborted');
|
|
77
|
+
reader.onerror = () => console.log('file reading has failed');
|
|
78
|
+
|
|
79
|
+
reader.readAsBinaryString(file);
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
```
|
|
83
|
+
|
|
57
84
|
## PropTypes
|
|
58
85
|
|
|
59
86
|
See https://react-dropzone.netlify.com/#proptypes
|