| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109 |
7x
2x
11x
11x
11x
11x
8x
7x
1x
11x
3x
2x
1x
11x
11x
11x
11x
11x
11x
2x
2x
2x
1x
9x
1x
8x
1x
7x
1x
6x
2x
4x
1x
3x
24x
24x
1x
23x
23x
| import React, { Component } from 'react';
import filestack from 'filestack-js';
import PropTypes from 'prop-types';
class ReactFilestack extends Component {
static defaultProps = {
file: null,
link: false,
buttonText: 'Pick file',
buttonClass: '',
onSuccess: result => console.log(result),
onError: error => console.error(error),
mode: 'pick',
options: {},
security: null,
children: null,
render: null,
};
static propTypes = {
file: PropTypes.objectOf(PropTypes.any),
apikey: PropTypes.string.isRequired,
link: PropTypes.bool,
mode: PropTypes.string,
buttonText: PropTypes.string,
buttonClass: PropTypes.string,
onSuccess: PropTypes.func,
onError: PropTypes.func,
options: PropTypes.objectOf(PropTypes.any),
security: PropTypes.objectOf(PropTypes.any),
children: PropTypes.node,
render: PropTypes.func,
};
onClickPick = (event) => {
event.stopPropagation();
event.preventDefault();
const { apikey, onSuccess, onError, options, mode, file, security } = this.props;
const onFinished = (result) => {
if (typeof onSuccess === 'function') {
onSuccess(result);
} else {
console.log(result);
}
};
const onFail = (error) => {
if (typeof onError === 'function') {
onError(error);
} else {
console.error(error);
}
};
this.initClient(mode, apikey, options, file, security)
.then(onFinished)
.catch(onFail);
};
initClient = (mode, apikey, options, file, security) => {
const { url, handle } = options;
delete options.handle;
delete options.url;
const client = filestack.init(apikey, security);
if (mode === 'transform') {
return new Promise((resolve, reject) => {
try {
resolve(client.transform(url, options));
} catch (err) {
reject(err);
}
});
} else if (mode === 'retrieve') {
return client.retrieve(handle, options);
} else if (mode === 'metadata') {
return client.metadata(handle, options);
} else if (mode === 'storeUrl') {
return client.storeURL(url, options);
} else if (mode === 'upload') {
return client.upload(file, options);
} else if (mode === 'remove') {
return client.remove(handle, security);
}
return client.pick(options);
};
render () {
const { buttonClass, buttonText, link, children, render: CustomRender } = this.props;
if (CustomRender) {
return (
<CustomRender onPick={this.onClickPick} />
);
}
const Tag = link ? 'a' : 'button';
return (
<Tag
name="filestack"
onClick={this.onClickPick}
className={buttonClass}
>
{children || buttonText}
</Tag>
);
}
}
export default ReactFilestack;
|