| 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 |
1x
2x
6x
6x
6x
6x
1x
1x
6x
2x
2x
6x
6x
6x
6x
6x
6x
1x
1x
1x
5x
1x
4x
1x
3x
1x
2x
2x
1x
1x
14x
14x
1x
13x
13x
| 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) => {
Eif (typeof onSuccess === 'function') {
onSuccess(result);
} else {
console.log(result);
}
};
const onFail = (error) => {
Eif (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 Iif (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;
|