react-dropzone 11.5.1 → 11.5.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/examples/pintura/README.md +144 -0
- package/package.json +1 -1
- package/styleguide.config.js +2 -4
- package/examples/doka/README.md +0 -140
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
If you'd like to integrate the dropzone with the [Pintura](https://pqina.nl/pintura/?ref=react-dropzone) image editor, you just need to pass either of the selected images to the `openDefaultEditor()` method exported by Pintura:
|
|
2
|
+
|
|
3
|
+
```jsx static
|
|
4
|
+
import React, { useState, useEffect } from 'react';
|
|
5
|
+
|
|
6
|
+
// React Dropzone
|
|
7
|
+
import { useDropzone } from 'react-dropzone';
|
|
8
|
+
|
|
9
|
+
// Pintura Image Editor
|
|
10
|
+
import 'pintura/pintura.css';
|
|
11
|
+
import { openDefaultEditor } from 'pintura';
|
|
12
|
+
|
|
13
|
+
// Based on the default React Dropzone image thumbnail example
|
|
14
|
+
// The `thumbButton` style positions the edit button in the bottom right corner of the thumbnail
|
|
15
|
+
const thumbsContainer = {
|
|
16
|
+
display: 'flex',
|
|
17
|
+
flexDirection: 'row',
|
|
18
|
+
flexWrap: 'wrap',
|
|
19
|
+
marginTop: 16,
|
|
20
|
+
padding: 20,
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const thumb = {
|
|
24
|
+
position: 'relative',
|
|
25
|
+
display: 'inline-flex',
|
|
26
|
+
borderRadius: 2,
|
|
27
|
+
border: '1px solid #eaeaea',
|
|
28
|
+
marginBottom: 8,
|
|
29
|
+
marginRight: 8,
|
|
30
|
+
width: 100,
|
|
31
|
+
height: 100,
|
|
32
|
+
padding: 4,
|
|
33
|
+
boxSizing: 'border-box',
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
const thumbInner = {
|
|
37
|
+
display: 'flex',
|
|
38
|
+
minWidth: 0,
|
|
39
|
+
overflow: 'hidden',
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
const img = {
|
|
43
|
+
display: 'block',
|
|
44
|
+
width: 'auto',
|
|
45
|
+
height: '100%',
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
const thumbButton = {
|
|
49
|
+
position: 'absolute',
|
|
50
|
+
right: 10,
|
|
51
|
+
bottom: 10,
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
// This function is called when the user taps the edit button.
|
|
55
|
+
// It opens the editor and returns the modified file when done
|
|
56
|
+
const editImage = (image, done) => {
|
|
57
|
+
const imageFile = image.pintura ? image.pintura.file : image;
|
|
58
|
+
const imageState = image.pintura ? image.pintura.data : {};
|
|
59
|
+
|
|
60
|
+
const editor = openDefaultEditor({
|
|
61
|
+
src: imageFile,
|
|
62
|
+
imageState,
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
editor.on('close', () => {
|
|
66
|
+
// the user cancelled editing the image
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
editor.on('process', ({ dest, imageState }) => {
|
|
70
|
+
Object.assign(dest, {
|
|
71
|
+
pintura: { file: imageFile, data: imageState },
|
|
72
|
+
});
|
|
73
|
+
done(dest);
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
const [files, setFiles] = useState([]);
|
|
79
|
+
const { getRootProps, getInputProps } = useDropzone({
|
|
80
|
+
accept: 'image/*',
|
|
81
|
+
onDrop: (acceptedFiles) => {
|
|
82
|
+
setFiles(
|
|
83
|
+
acceptedFiles.map((file) =>
|
|
84
|
+
Object.assign(file, {
|
|
85
|
+
preview: URL.createObjectURL(file),
|
|
86
|
+
})
|
|
87
|
+
)
|
|
88
|
+
);
|
|
89
|
+
},
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const thumbs = files.map((file, index) => (
|
|
93
|
+
<div style={thumb} key={file.name}>
|
|
94
|
+
<div style={thumbInner}>
|
|
95
|
+
<img src={file.preview} style={img} alt="" />
|
|
96
|
+
</div>
|
|
97
|
+
<button
|
|
98
|
+
style={thumbButton}
|
|
99
|
+
onClick={() =>
|
|
100
|
+
editImage(file, (output) => {
|
|
101
|
+
const updatedFiles = [...files];
|
|
102
|
+
|
|
103
|
+
// replace original image with new image
|
|
104
|
+
updatedFiles[index] = output;
|
|
105
|
+
|
|
106
|
+
// revoke preview URL for old image
|
|
107
|
+
if (file.preview) URL.revokeObjectURL(file.preview);
|
|
108
|
+
|
|
109
|
+
// set new preview URL
|
|
110
|
+
Object.assign(output, {
|
|
111
|
+
preview: URL.createObjectURL(output),
|
|
112
|
+
});
|
|
113
|
+
|
|
114
|
+
// update view
|
|
115
|
+
setFiles(updatedFiles);
|
|
116
|
+
})
|
|
117
|
+
}
|
|
118
|
+
>
|
|
119
|
+
Edit
|
|
120
|
+
</button>
|
|
121
|
+
</div>
|
|
122
|
+
));
|
|
123
|
+
|
|
124
|
+
useEffect(
|
|
125
|
+
() => () => {
|
|
126
|
+
// Make sure to revoke the Object URL to avoid memory leaks
|
|
127
|
+
files.forEach((file) => URL.revokeObjectURL(file.preview));
|
|
128
|
+
},
|
|
129
|
+
[files]
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
return (
|
|
133
|
+
<section className="container">
|
|
134
|
+
<div {...getRootProps({ className: 'dropzone' })}>
|
|
135
|
+
<input {...getInputProps()} />
|
|
136
|
+
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
137
|
+
</div>
|
|
138
|
+
<aside style={thumbsContainer}>{thumbs}</aside>
|
|
139
|
+
</section>
|
|
140
|
+
);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
export default App;
|
|
144
|
+
```
|
package/package.json
CHANGED
package/styleguide.config.js
CHANGED
|
@@ -19,11 +19,9 @@ module.exports = {
|
|
|
19
19
|
serverPort: 8080,
|
|
20
20
|
moduleAliases: {
|
|
21
21
|
'react-dropzone': path.resolve(__dirname, './src'),
|
|
22
|
-
'doka': path.resolve(__dirname, './vendor/doka/doka.esm.min.js')
|
|
23
22
|
},
|
|
24
23
|
require: [
|
|
25
24
|
path.join(__dirname, 'examples/theme.css'),
|
|
26
|
-
path.join(__dirname, 'vendor/doka/doka.min.css'),
|
|
27
25
|
],
|
|
28
26
|
sections: [
|
|
29
27
|
{
|
|
@@ -85,8 +83,8 @@ module.exports = {
|
|
|
85
83
|
name: 'Integrations',
|
|
86
84
|
sections: [
|
|
87
85
|
{
|
|
88
|
-
name: '
|
|
89
|
-
content: 'examples/
|
|
86
|
+
name: 'Pintura',
|
|
87
|
+
content: 'examples/pintura/README.md'
|
|
90
88
|
}
|
|
91
89
|
]
|
|
92
90
|
}
|
package/examples/doka/README.md
DELETED
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
If you'd like to integrate the dropzone with the [doka](https://pqina.nl/doka/?ref=react-dropzone) image editor, you just need to pass either of the selected images to the `create()` method exported by doka:
|
|
2
|
-
|
|
3
|
-
```jsx harmony
|
|
4
|
-
import React, {useEffect, useState} from 'react';
|
|
5
|
-
import {useDropzone} from 'react-dropzone';
|
|
6
|
-
|
|
7
|
-
import {create} from 'doka';
|
|
8
|
-
|
|
9
|
-
const thumbsContainer = {
|
|
10
|
-
display: "flex",
|
|
11
|
-
flexDirection: "row",
|
|
12
|
-
flexWrap: "wrap",
|
|
13
|
-
marginTop: 16,
|
|
14
|
-
padding: 20
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
const thumb = {
|
|
18
|
-
position: "relative",
|
|
19
|
-
display: "inline-flex",
|
|
20
|
-
borderRadius: 2,
|
|
21
|
-
border: "1px solid #eaeaea",
|
|
22
|
-
marginBottom: 8,
|
|
23
|
-
marginRight: 8,
|
|
24
|
-
width: 100,
|
|
25
|
-
height: 100,
|
|
26
|
-
padding: 4,
|
|
27
|
-
boxSizing: "border-box"
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const thumbInner = {
|
|
31
|
-
display: "flex",
|
|
32
|
-
minWidth: 0,
|
|
33
|
-
overflow: "hidden"
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
const img = {
|
|
37
|
-
display: "block",
|
|
38
|
-
width: "auto",
|
|
39
|
-
height: "100%"
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
const thumbButton = {
|
|
43
|
-
position: "absolute",
|
|
44
|
-
right: 10,
|
|
45
|
-
bottom: 10,
|
|
46
|
-
background: "rgba(0,0,0,.8)",
|
|
47
|
-
color: "#fff",
|
|
48
|
-
border: 0,
|
|
49
|
-
borderRadius: ".325em",
|
|
50
|
-
cursor: "pointer"
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
const editImage = (image, done) => {
|
|
54
|
-
const imageFile = image.doka ? image.doka.file : image;
|
|
55
|
-
const imageState = image.doka ? image.doka.data : {};
|
|
56
|
-
create({
|
|
57
|
-
// recreate previous state
|
|
58
|
-
...imageState,
|
|
59
|
-
|
|
60
|
-
// load original image file
|
|
61
|
-
src: imageFile,
|
|
62
|
-
outputData: true,
|
|
63
|
-
|
|
64
|
-
onconfirm: ({ file, data }) => {
|
|
65
|
-
Object.assign(file, {
|
|
66
|
-
doka: { file: imageFile, data }
|
|
67
|
-
});
|
|
68
|
-
done(file);
|
|
69
|
-
}
|
|
70
|
-
});
|
|
71
|
-
};
|
|
72
|
-
|
|
73
|
-
function Doka(props) {
|
|
74
|
-
const [files, setFiles] = useState([]);
|
|
75
|
-
const { getRootProps, getInputProps } = useDropzone({
|
|
76
|
-
accept: "image/*",
|
|
77
|
-
onDrop: (acceptedFiles) => {
|
|
78
|
-
setFiles(
|
|
79
|
-
acceptedFiles.map((file) =>
|
|
80
|
-
Object.assign(file, {
|
|
81
|
-
preview: URL.createObjectURL(file)
|
|
82
|
-
})
|
|
83
|
-
)
|
|
84
|
-
);
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
|
|
88
|
-
const thumbs = files.map((file, index) => (
|
|
89
|
-
<div style={thumb} key={file.name}>
|
|
90
|
-
<div style={thumbInner}>
|
|
91
|
-
<img src={file.preview} style={img} alt="" />
|
|
92
|
-
</div>
|
|
93
|
-
<button
|
|
94
|
-
style={thumbButton}
|
|
95
|
-
onClick={() =>
|
|
96
|
-
editImage(file, (output) => {
|
|
97
|
-
const updatedFiles = [...files];
|
|
98
|
-
|
|
99
|
-
// replace original image with new image
|
|
100
|
-
updatedFiles[index] = output;
|
|
101
|
-
|
|
102
|
-
// revoke preview URL for old image
|
|
103
|
-
if (file.preview) URL.revokeObjectURL(file.preview);
|
|
104
|
-
|
|
105
|
-
// set new preview URL
|
|
106
|
-
Object.assign(output, {
|
|
107
|
-
preview: URL.createObjectURL(output)
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
// update view
|
|
111
|
-
setFiles(updatedFiles);
|
|
112
|
-
})
|
|
113
|
-
}
|
|
114
|
-
>
|
|
115
|
-
edit
|
|
116
|
-
</button>
|
|
117
|
-
</div>
|
|
118
|
-
));
|
|
119
|
-
|
|
120
|
-
useEffect(
|
|
121
|
-
() => () => {
|
|
122
|
-
// Make sure to revoke the data uris to avoid memory leaks
|
|
123
|
-
files.forEach((file) => URL.revokeObjectURL(file.preview));
|
|
124
|
-
},
|
|
125
|
-
[files]
|
|
126
|
-
);
|
|
127
|
-
|
|
128
|
-
return (
|
|
129
|
-
<section className="container">
|
|
130
|
-
<div {...getRootProps({ className: "dropzone" })}>
|
|
131
|
-
<input {...getInputProps()} />
|
|
132
|
-
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
133
|
-
</div>
|
|
134
|
-
<aside style={thumbsContainer}>{thumbs}</aside>
|
|
135
|
-
</section>
|
|
136
|
-
);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
<Doka />
|
|
140
|
-
```
|