Comments (7)
Here's a really dirty workaround, for those experiencing the same issue with filestack-react
and Meteor.
1 - Remove filestack-react
from your project:
npm rm filestack-react
2 - Add filestack-js
:
npm i --save filestack-js
3 - Create a new react component in your project, called ReactFilestack.jsx
and paste in the code found here: https://github.com/filestack/filestack-react/blob/master/src/ReactFilestack.jsx
Then change the import statement for filestack
to point directly to /node_modules/filestack-js/build/browser/filestack.min.js
You can then use this new component in place of the filestack-react
package.
import React, { Component } from 'react';
import * as filestack from '/node_modules/filestack-js/build/browser/filestack.min.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,
cname: null,
sessionCache: false,
preload: false,
};
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,
cname: PropTypes.string,
sessionCache: PropTypes.bool,
preload: PropTypes.bool,
};
constructor(props) {
super(props);
const { apikey, security, cname, sessionCache, preload, options } = this.props;
const client = filestack.init(apikey, {
security,
cname,
sessionCache,
});
this.state = {
client,
picker: preload ? client.picker({ ...options, onUploadDone: this.onFinished }) : null,
};
this.onFinished = this.onFinished.bind(this);
this.onFail = this.onFail.bind(this);
}
onClickPick = event => {
event.stopPropagation();
event.preventDefault();
const { client, picker } = this.state;
const { options, mode, file, security, preload } = this.props;
this.callPicker(mode, options, file, security, preload, client, picker)
.then(this.onFinished)
.catch(this.onFail);
};
onFinished = result => {
const { onSuccess } = this.props;
if (typeof onSuccess === 'function' && result) {
onSuccess(result);
}
};
onFail = error => {
const { onError } = this.props;
if (typeof onError === 'function') {
onError(error);
} else {
console.error(error);
}
};
callPicker = (mode, options, file, security, preload, client, picker) => {
const { url, handle } = options;
delete options.handle;
delete options.url;
if (mode === 'transform') {
return new Promise((resolve, reject) => {
try {
resolve(client.transform(handle, 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 new Promise(resolve => {
if (preload) {
picker.open();
resolve();
} else {
client.picker({ ...options, onUploadDone: resolve }).open();
}
});
};
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;
from filestack-react.
@ninjaPixel @StorytellerCZ @graphographer
The newest version is using filestack-js 2.0.5 and it should fix this problem.
from filestack-react.
Bump. I'm having the same issue.
from filestack-react.
I've run into this as well, but it comes from the filestack-js client. Once I had the package compiled with Meteor it started working just fine.
from filestack-react.
The issue on the client: filestack/filestack-js#142
Though I doubt that the workarounds there will be of any use here...
from filestack-react.
I'm getting the following error in my Meteor project
/node_modules/filestack-js/build/browser/index.esm.js:19042
Uncaught (in promise) SyntaxError: Unexpected token export
Any suggestions from team Filestack?
from filestack-react.
@AndrzejSala I've just tried filestack-react
3.1.0 and this error is still there
from filestack-react.
Related Issues (20)
- How i can rename file after click on upload button in react file stack
- Uncaught (in promise) Error: Filestack Picker Initialize Error in Console After Upload HOT 8
- Add onClose prop to properly handle the picker being closed HOT 3
- Component just displays "folder is empty" for all integrations without ever trying to connect. HOT 1
- PickerInline && PickerDrop -- complain about missing container HOT 7
- React 17 Support HOT 5
- Refactor removed type definitions
- setting errorTimeout does nothing -- is there no way to change timeout for uploads?
- npm install issue with Next.js HOT 7
- Upload by URL HOT 1
- Setting filename currently not possible ?
- Once closed it cannot be reopened HOT 2
- Cancel upload when modal not visible
- typescript issue, loader
- Reducing component bundle size by importing specific components
- React 18 support HOT 6
- Api connection failed HOT 1
- Ability to show already uploaded files by tag
- Choose output image format with PickerOverlay
- PickerDropPane renders twice in NextJS 14+ unless react strict mode is disabled
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from filestack-react.