Skip to content

Commit aa2a4ff

Browse files
BunlongBunlong
authored
Merge pull request #13 from Bunlong/feature
Feature
2 parents 38cf384 + 59861db commit aa2a4ff

28 files changed

Lines changed: 550 additions & 222 deletions

‎README.md‎

Lines changed: 78 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -79,64 +79,96 @@ import { CSVReader } from 'react-papaparse'
7979
const buttonRef = React.createRef()
8080

8181
export default class CSVReader extends Component {
82+
handleOpenDialog = (e) => {
83+
// Note that the ref is set async, so it might be null at some point
84+
if (buttonRef.current) {
85+
buttonRef.current.open(e)
86+
}
87+
}
88+
8289
handleOnFileLoad = (data) => {
83-
console.log('--------------------------------------------------')
90+
console.log('---------------------------')
8491
console.log(data)
85-
console.log('--------------------------------------------------')
92+
console.log('---------------------------')
8693
}
8794

8895
handleOnError = (err, file, inputElem, reason) => {
8996
console.log(err)
9097
}
9198

92-
handleOpenDialog = (e) => {
93-
// Note that the ref is set async, so it might be null at some point
99+
handleOnRemoveFile = (data) => {
100+
console.log('---------------------------')
101+
console.log(data)
102+
console.log('---------------------------')
103+
}
104+
105+
handleRemoveFile = (e) => {
106+
// Note that the ref is set async, so it might be null at some point
94107
if (buttonRef.current) {
95-
buttonRef.current.open(e)
108+
buttonRef.current.removeFile(e)
96109
}
97110
}
98111

99112
render() {
100113
return (
101114
<CSVReader
102115
ref={buttonRef}
103-
onFileLoad={this.handleOnFileLoad}
116+
onFileLoad={this.handleOnDrop}
104117
onError={this.handleOnError}
105118
noClick
106119
noDrag
120+
onRemoveFile={this.handleOnRemoveFile}
107121
>
108-
{({file}) => (
109-
<aside style={{display: 'flex', flexDirection: 'row', marginBottom: 10}}>
122+
{({ file }) => (
123+
<aside
124+
style={{
125+
display: 'flex',
126+
flexDirection: 'row',
127+
marginBottom: 10
128+
}}
129+
>
110130
<button
111-
type="button"
131+
type='button'
112132
onClick={this.handleOpenDialog}
113133
style={{
114-
width: '40%',
115134
borderRadius: 0,
116135
marginLeft: 0,
117136
marginRight: 0,
137+
width: '40%',
118138
paddingLeft: 0,
119-
paddingRight: 0,
139+
paddingRight: 0
120140
}}
121141
>
122142
Browe file
123143
</button>
124144
<div
125145
style={{
126-
width: '60%',
127-
height: 45,
128146
borderWidth: 1,
129147
borderStyle: 'solid',
130148
borderColor: '#ccc',
149+
height: 45,
150+
lineHeight: 2.5,
131151
marginTop: 5,
132152
marginBottom: 5,
133153
paddingLeft: 13,
134154
paddingTop: 3,
135-
lineHeight: 2.5,
155+
width: '60%'
136156
}}
137157
>
138-
{file.name}
158+
{file && file.name}
139159
</div>
160+
<button
161+
style={{
162+
borderRadius: 0,
163+
marginLeft: 0,
164+
marginRight: 0,
165+
paddingLeft: 20,
166+
paddingRight: 20
167+
}}
168+
onClick={this.handleRemoveFile}
169+
>
170+
Remove
171+
</button>
140172
</aside>
141173
)}
142174
</CSVReader>
@@ -156,20 +188,28 @@ import { CSVReader } from 'react-papaparse'
156188

157189
export default class CSVReader extends Component {
158190
handleOnDrop = (data) => {
159-
console.log('--------------------------------------------------')
191+
console.log('---------------------------')
160192
console.log(data)
161-
console.log('--------------------------------------------------')
193+
console.log('---------------------------')
162194
}
163195

164196
handleOnError = (err, file, inputElem, reason) => {
165197
console.log(err)
166198
}
167199

200+
handleOnRemoveFile = (data) => {
201+
console.log('---------------------------')
202+
console.log(data)
203+
console.log('---------------------------')
204+
}
205+
168206
render() {
169207
return (
170-
<CSVReader
208+
<CSVReader
171209
onDrop={this.handleOnDrop}
172210
onError={this.handleOnError}
211+
addRemoveButton
212+
onRemoveFile={this.handleOnRemoveFile}
173213
>
174214
<span>Drop CSV file here or click to upload.</span>
175215
</CSVReader>
@@ -189,21 +229,29 @@ import { CSVReader } from 'react-papaparse'
189229

190230
export default class CSVReader extends Component {
191231
handleOnDrop = (data) => {
192-
console.log('--------------------------------------------------')
232+
console.log('---------------------------')
193233
console.log(data)
194-
console.log('--------------------------------------------------')
234+
console.log('---------------------------')
195235
}
196236

197237
handleOnError = (err, file, inputElem, reason) => {
198238
console.log(err)
199239
}
200240

241+
handleOnRemoveFile = (data) => {
242+
console.log('---------------------------')
243+
console.log(data)
244+
console.log('---------------------------')
245+
}
246+
201247
render() {
202248
return (
203249
<CSVReader
204250
onDrop={this.handleOnDrop}
205251
onError={this.handleOnError}
206252
noClick
253+
addRemoveButton
254+
onRemoveFile={this.handleOnRemoveFile}
207255
>
208256
<span>Drop CSV file here to upload.</span>
209257
</CSVReader>
@@ -223,21 +271,29 @@ import { CSVReader } from 'react-papaparse'
223271

224272
export default class CSVReader extends Component {
225273
handleOnDrop = (data) => {
226-
console.log('--------------------------------------------------')
274+
console.log('---------------------------')
227275
console.log(data)
228-
console.log('--------------------------------------------------')
276+
console.log('---------------------------')
229277
}
230278

231279
handleOnError = (err, file, inputElem, reason) => {
232280
console.log(err)
233281
}
234282

283+
handleOnRemoveFile = (data) => {
284+
console.log('---------------------------')
285+
console.log(data)
286+
console.log('---------------------------')
287+
}
288+
235289
render() {
236290
return (
237291
<CSVReader
238292
onDrop={this.handleOnDrop}
239293
onError={this.handleOnError}
240294
noDrag
295+
addRemoveButton
296+
onRemoveFile={this.handleOnRemoveFile}
241297
>
242298
<span>Click to upload.</span>
243299
</CSVReader>

‎demo/CSVReader1.js‎

Lines changed: 43 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,33 @@ import { CSVReader } from 'react-papaparse'
44
const buttonRef = React.createRef()
55

66
export default class CSVReader1 extends Component {
7+
handleOpenDialog = (e) => {
8+
// Note that the ref is set async, so it might be null at some point
9+
if (buttonRef.current) {
10+
buttonRef.current.open(e)
11+
}
12+
}
13+
714
handleOnFileLoad = (data) => {
8-
console.log('--------------------------------------------------')
15+
console.log('---------------------------')
916
console.log(data)
10-
console.log('--------------------------------------------------')
17+
console.log('---------------------------')
1118
}
1219

1320
handleOnError = (err, file, inputElem, reason) => {
1421
console.log(err)
1522
}
1623

17-
handleOpenDialog = (e) => {
24+
handleOnRemoveFile = (data) => {
25+
console.log('---------------------------')
26+
console.log(data)
27+
console.log('---------------------------')
28+
}
29+
30+
handleRemoveFile = (e) => {
1831
// Note that the ref is set async, so it might be null at some point
1932
if (buttonRef.current) {
20-
buttonRef.current.open(e)
33+
buttonRef.current.removeFile(e)
2134
}
2235
}
2336

@@ -27,21 +40,28 @@ export default class CSVReader1 extends Component {
2740
<h5>Basic Upload</h5>
2841
<CSVReader
2942
ref={buttonRef}
30-
onFileLoad={this.handleOnFileLoad}
43+
onFileLoad={this.handleOnDrop}
3144
onError={this.handleOnError}
3245
noClick
3346
noDrag
47+
onRemoveFile={this.handleOnRemoveFile}
3448
>
3549
{({ file }) => (
36-
<aside style={{ display: 'flex', flexDirection: 'row', marginBottom: 10 }}>
50+
<aside
51+
style={{
52+
display: 'flex',
53+
flexDirection: 'row',
54+
marginBottom: 10
55+
}}
56+
>
3757
<button
3858
type='button'
3959
onClick={this.handleOpenDialog}
4060
style={{
41-
width: '40%',
4261
borderRadius: 0,
4362
marginLeft: 0,
4463
marginRight: 0,
64+
width: '40%',
4565
paddingLeft: 0,
4666
paddingRight: 0
4767
}}
@@ -50,20 +70,32 @@ export default class CSVReader1 extends Component {
5070
</button>
5171
<div
5272
style={{
53-
width: '60%',
54-
height: 45,
5573
borderWidth: 1,
5674
borderStyle: 'solid',
5775
borderColor: '#ccc',
76+
height: 45,
77+
lineHeight: 2.5,
5878
marginTop: 5,
5979
marginBottom: 5,
6080
paddingLeft: 13,
6181
paddingTop: 3,
62-
lineHeight: 2.5
82+
width: '60%'
6383
}}
6484
>
65-
{file.name}
85+
{file && file.name}
6686
</div>
87+
<button
88+
style={{
89+
borderRadius: 0,
90+
marginLeft: 0,
91+
marginRight: 0,
92+
paddingLeft: 20,
93+
paddingRight: 20
94+
}}
95+
onClick={this.handleRemoveFile}
96+
>
97+
Remove
98+
</button>
6799
</aside>
68100
)}
69101
</CSVReader>

‎demo/CSVReader2.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,30 @@ import { CSVReader } from 'react-papaparse'
33

44
export default class CSVReader2 extends Component {
55
handleOnDrop = (data) => {
6-
console.log('--------------------------------------------------')
6+
console.log('---------------------------')
77
console.log(data)
8-
console.log('--------------------------------------------------')
8+
console.log('---------------------------')
99
}
1010

1111
handleOnError = (err, file, inputElem, reason) => {
1212
console.log(err)
1313
}
1414

15+
handleOnRemoveFile = (data) => {
16+
console.log('---------------------------')
17+
console.log(data)
18+
console.log('---------------------------')
19+
}
20+
1521
render() {
1622
return (
1723
<>
1824
<h5>Click and Drag Upload</h5>
1925
<CSVReader
2026
onDrop={this.handleOnDrop}
2127
onError={this.handleOnError}
28+
addRemoveButton
29+
onRemoveFile={this.handleOnRemoveFile}
2230
>
2331
<span>Drop CSV file here or click to upload.</span>
2432
</CSVReader>

‎demo/CSVReader3.js‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,21 @@ import { CSVReader } from 'react-papaparse'
33

44
export default class CSVReader3 extends Component {
55
handleOnDrop = (data) => {
6-
console.log('--------------------------------------------------')
6+
console.log('---------------------------')
77
console.log(data)
8-
console.log('--------------------------------------------------')
8+
console.log('---------------------------')
99
}
1010

1111
handleOnError = (err, file, inputElem, reason) => {
1212
console.log(err)
1313
}
1414

15+
handleOnRemoveFile = (data) => {
16+
console.log('---------------------------')
17+
console.log(data)
18+
console.log('---------------------------')
19+
}
20+
1521
render() {
1622
return (
1723
<>
@@ -20,6 +26,8 @@ export default class CSVReader3 extends Component {
2026
onDrop={this.handleOnDrop}
2127
onError={this.handleOnError}
2228
noClick
29+
addRemoveButton
30+
onRemoveFile={this.handleOnRemoveFile}
2331
>
2432
<span>Drop CSV file here to upload.</span>
2533
</CSVReader>

0 commit comments

Comments
 (0)