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; |