Official React component for Filestack - API and content management system that makes it easy to add powerful file uploading and transformation capabilities to any web or mobile application.
Home Page: https://www.filestack.com
License: MIT License
I'm forcing cropping and I always see this message in the console. I'm using filestack-react v3.1.0, which is pulling in filestack-js v3.5.0.
Upload in background can be enabled only when cropper is disabled
Here's how I'm using the FileStack component:
<Filestack
apikey={FilestackApiKey}
action="pick"
actionOptions={{
accept: "image/*",
allowManualRetry: true,
fromSources: ["local_file_system"],
transformations: {
circle: false,
crop: {
aspectRatio,
force: true,
},
},
customText: {
"Select Files to Upload": "Select Image to Upload",
},
}}
onSuccess={data => onAddImg(data.filesUploaded[0])}
/>
Will this lib works with React Native (including the crop feature) ?
Latest version is 0.5.2.
Be aware of breaking changes in transformOptions.
The widget takes much time to be shown. However, there is only onSuccess and onError callback. How can we manage user's expectation like adding a spinner during the time to be shown? Or we can just let them wait for a few seconds to cold start the widget? For the native js API there is method like onOpen, but it is not implemented in this library.
Currently, react-filestack uses filestack-js 0.2.
Should it be updated to 0.3, no?
React v15.2.1 React Redux v4.4.5
package.json
{
"name": "abc",
"version": "1.0.0",
"description": "",
"private": true,
"engines": {
"node": ">=6",
"npm": ">=3"
},
"author": "Gigster",
"scripts": {
"analyze:clean": "rimraf stats.json",
"preanalyze": "npm run analyze:clean",
"analyze": "node ./internals/scripts/analyze.js",
"npmcheckversion": "node ./internals/scripts/npmcheckversion.js",
"preinstall": "npm run npmcheckversion",
"postinstall": "npm run build:dll",
"build": "cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p || true",
"build:clean": "npm run test:clean && rimraf ./build",
"build:dll": "node ./internals/scripts/dependencies.js",
"start": "cross-env NODE_ENV=development node server",
"start:tunnel": "cross-env NODE_ENV=development ENABLE_TUNNEL=true node server",
"start:production": "npm run build && npm run start:prod",
"start:prod": "cross-env NODE_ENV=production node server",
"pagespeed": "node ./internals/scripts/pagespeed.js",
"presetup": "npm i chalk",
"setup": "node ./internals/scripts/setup.js",
"postsetup": "npm run build:dll",
"clean": "shjs ./internals/scripts/clean.js",
"clean:all": "npm run analyze:clean && npm run test:clean && npm run build:clean",
"generate": "plop --plopfile internals/generators/index.js",
"//": "THAT USED TO BE LINT npm run lint:js && npm run lint:css",
"lint:eslint": "eslint --ignore-path .gitignore --ignore-pattern internals/scripts",
"lint:js": "npm run lint:eslint -- . ",
"lint:css": "stylelint ./app/**/*.css",
"pretest": "npm run test:clean # && npm run lint",
"test:clean": "#rimraf ./coverage",
"test": "#cross-env NODE_ENV=test karma start internals/testing/karma.conf.js --single-run",
"test:watch": "#npm run test -- --auto-watch --no-single-run",
"test:firefox": "#npm run test -- --browsers Firefox",
"test:safari": "#npm run test -- --browsers Safari",
"test:ie": "#npm run test -- --browsers IE",
"heroku-postbuild": "npm run build"
},
"babel": {
"presets": [
[
"es2015",
{
"modules": false
}
],
"react",
"stage-0"
],
"env": {
"production": {
"only": [
"app"
],
"plugins": [
"transform-react-remove-prop-types",
"transform-react-constant-elements",
"transform-react-inline-elements"
]
}
}
},
"eslintConfig": {
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
"mocha": true,
"es6": true
},
"plugins": [
"react",
"jsx-a11y"
],
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"import/no-unresolved": 2,
"arrow-body-style": [
2,
"as-needed"
],
"comma-dangle": [
2,
"always-multiline"
],
"consistent-return": 0,
"import/imports-first": 0,
"import/newline-after-import": 0,
"import/no-extraneous-dependencies": 0,
"import/no-named-as-default": 0,
"import/prefer-default-export": 0,
"indent": [
2,
2,
{
"SwitchCase": 1
}
],
"react/jsx-space-before-closing": 0,
"react/jsx-closing-bracket-location": [
1,
"after-props"
],
"jsx-a11y/aria-props": 2,
"jsx-a11y/heading-has-content": 0,
"jsx-a11y/href-no-hash": 2,
"jsx-a11y/label-has-for": 0,
"jsx-a11y/mouse-events-have-key-events": 2,
"jsx-a11y/no-static-element-interactions": 0,
"jsx-a11y/role-has-required-aria-props": 2,
"jsx-a11y/role-supports-aria-props": 2,
"max-len": 0,
"newline-per-chained-call": 0,
"no-console": 1,
"no-constant-condition": 0,
"no-nested-ternary": 0,
"no-return-assign": 0,
"no-unused-expressions": 0,
"no-use-before-define": 0,
"prefer-template": 2,
"react/forbid-prop-types": 0,
"react/jsx-filename-extension": 0,
"react/jsx-no-target-blank": 0,
"react/no-unused-prop-types": 0,
"react/require-extension": 0,
"react/self-closing-comp": 0,
"require-yield": 0
},
"settings": {
"import/resolver": {
"webpack": {
"config": "./internals/webpack/webpack.test.babel.js"
}
}
}
},
"stylelint": {
"extends": "stylelint-config-standard",
"rules": {
"color-hex-case": "upper",
"string-quotes": "single",
"selector-pseudo-class-no-unknown": [
true,
{
"ignorePseudoClasses": [
"global"
]
}
],
"indentation": 2,
"function-comma-space-after": "always-single-line",
"rule-nested-empty-line-before": "never",
"comment-empty-line-before": "never",
"property-no-unknown": [
true,
{
"ignoreProperties": [
"composes"
]
}
],
"declaration-block-no-duplicate-properties": [
true,
{
"ignore": [
"consecutive-duplicates"
]
}
]
}
},
"dllPlugin": {
"path": "node_modules/react-boilerplate-dlls",
"exclude": [
"chalk",
"compression",
"cross-env",
"express",
"ip",
"minimist",
"sanitize.css"
],
"include": [
"core-js",
"lodash",
"eventsource-polyfill"
]
},
"dependencies": {
"axios": "0.13.1",
"babel-polyfill": "6.13.0",
"chalk": "1.1.3",
"compression": "1.6.2",
"copy-webpack-plugin": "^4.0.0",
"cross-env": "^2.0.1",
"crypto-js": "^3.1.8",
"es6-docready": "^1.0.0",
"es6-dom": "^1.0.0",
"express": "4.14.0",
"express-sslify": "^1.2.0",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"filestack-js": "^0.9.12",
"filestack-react": "^1.3.8",
"fontfaceobserver": "2.0.4",
"history": "3.0.0",
"html-webpack-plugin": "^2.22.0",
"immutable": "3.8.1",
"invariant": "2.2.1",
"ip": "1.1.3",
"lodash": "4.15.0",
"minimist": "^1.2.0",
"moment": "2.15.0",
"offline-plugin": "^3.4.2",
"postcss-cssnext": "^2.8.0",
"postcss-nested": "^1.0.0",
"postcss-reporter": "^1.4.1",
"postcss-simple-vars": "^3.0.0",
"react": "15.2.1",
"react-addons-css-transition-group": "15.3.0",
"react-addons-pure-render-mixin": "15.3.0",
"react-autosuggest": "6.0.4",
"react-datepicker": "0.29.0",
"react-dd-menu": "1.0.7",
"react-dom": "15.3.0",
"react-dropzone": "3.6.0",
"react-dropzone-component": "^2.0.0",
"react-filepicker": "^0.10.16",
"react-fontawesome": "^1.5.0",
"react-ga": "^2.1.2",
"react-helmet": "3.1.0",
"react-https-redirect": "^1.0.9",
"react-image-lightbox": "^4.3.0",
"react-modal": "1.4.0",
"react-month-picker": "^1.1.3",
"react-phone-input": "1.1.3",
"react-redux": "4.4.5",
"react-router": "2.8.0",
"react-router-redux": "4.0.5",
"react-router-scroll": "0.3.2",
"react-select": "1.0.0-rc.2",
"react-slick": "0.12.2",
"react-tooltip": "^3.3.0",
"react-window-state": "0.1.3",
"react-youtube-video": "^1.0.3",
"redux": "3.6.0",
"redux-form": "5.3.2",
"redux-immutable": "3.0.8",
"redux-saga": "0.11.1",
"reselect": "2.5.3",
"rimraf": "^2.5.4",
"sanitize.css": "4.1.0",
"spark-md5": "^3.0.0",
"warning": "3.0.0",
"webpack": "^2.1.0-beta.22",
"whatwg-fetch": "1.0.0"
},
"devDependencies": {
"babel-core": "6.14.0",
"babel-eslint": "6.1.2",
"babel-loader": "6.2.4",
"babel-plugin-react-transform": "2.0.2",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-plugin-transform-react-remove-prop-types": "0.2.9",
"babel-preset-es2015": "6.14.0",
"babel-preset-react": "6.11.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-0": "6.5.0",
"chai": "3.5.0",
"chai-enzyme": "0.5.1",
"cheerio": "0.22.0",
"copy-webpack-plugin": "4.0.0",
"css-loader": "0.25.0",
"enzyme": "2.4.1",
"eslint": "3.8.1",
"eslint-config-airbnb": "11.1.0",
"eslint-import-resolver-webpack": "0.5.1",
"eslint-plugin-import": "1.14.0",
"eslint-plugin-jsx-a11y": "2.2.2",
"eslint-plugin-react": "6.2.0",
"eventsource-polyfill": "0.9.6",
"expect": "1.20.2",
"expect-jsx": "2.6.0",
"exports-loader": "0.6.3",
"extract-text-webpack-plugin": "2.0.0-beta.4",
"file-loader": "0.9.0",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.22.0",
"image-webpack-loader": "2.0.0",
"imports-loader": "0.6.5",
"json-loader": "0.5.4",
"karma": "1.3.0",
"karma-chrome-launcher": "1.0.1",
"karma-coverage": "1.1.1",
"karma-firefox-launcher": "1.0.0",
"karma-ie-launcher": "1.0.0",
"karma-mocha": "1.1.1",
"karma-mocha-reporter": "2.1.0",
"karma-safari-launcher": "1.0.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "1.8.0",
"lint-staged": "3.0.1",
"minimist": "1.2.0",
"mocha": "3.0.2",
"ngrok": "^2.2.4",
"null-loader": "0.1.1",
"offline-plugin": "3.4.2",
"plop": "1.5.0",
"postcss-cssnext": "2.8.0",
"postcss-loader": "0.13.0",
"postcss-nested": "1.0.0",
"postcss-reporter": "1.4.1",
"postcss-simple-vars": "3.0.0",
"psi": "2.0.4",
"rimraf": "2.5.4",
"shelljs": "0.7.4",
"sinon": "2.0.0-pre",
"style-loader": "0.13.1",
"stylelint": "7.2.0",
"stylelint-config-standard": "13.0.0",
"url-loader": "0.5.7",
"webpack": "2.1.0-beta.22",
"webpack-dev-middleware": "1.7.0",
"webpack-hot-middleware": "2.12.2"
}
}
In my application rendering server side I had the following problems:
Using browser-only version of superagent in non-browser environment
/...node_modules/filestack-react/dist/filestack-react.js:6
....
TypeError: Cannot read property 'loader' of undefined
at Object.<anonymous> (/...node_modules/filestack-react/dist/webpack:/~/filestack-js/dist/filestack.es2015.js:9:25236)
....
Hi,
I was wondering if this is available for react native as well. Thanks!
Include a default thumbnail view for uploaded items
I was wondering, should ReactFilestack be PureComponent instead? It's stateless and its props won't change usually.
Hi everyone,
I'm experiencing some issues with the picker and Instagram connection on IE11. As soon as I click on the "Connect Instagram" button a new tab gets open and an error 400 is displayed. It works perfectly with Edge and other browsers. With IE11 I receive this error
Api key not found. Be sure that you are setting it with filepicker.setKey(). If you need an api key or forgot yours, head on over to https://developers.filepicker.io
the url is https://dialog.filestackapi.com/dialog/open/?auth=true#/Instagram/
I have tested it with the latest version of filestack-react and filestack-js.
Thanks for your help
I think this is a documentation issue rather than functionality, but it is really not clear how I am supposed to transform an image (in my case a simple resize) and then display it. I would expect the ReactFilestack component in "transform" mode to do this. But the docs don't actually tell me even how to pass in the url or Filestack handle to be resized?
Even after ( did npm install babel-plugin-transform-class-properties --save or use yarn. Why is that?
I'm getting this error in filestask-js 0.9.12 and filestack-react 1.3.8
Any thoughts?
We're using rmwc components with material UI. This doesn't work as expected because of your tagMap:
import { Button } from 'rmwc'
<ReactFilestack
componentDisplayMode={{
type: Button
}}
/>As the ReactFilestack component only renders the button, optimally I would expect the API to be something like this..
import { Button } from 'rmwc'
<ReactFilestack
component={Button}
label='Upload a file'
className='myclass'
/>So, in your constructor, something like this:
const {
apikey,
clientOptions,
actionOptions,
action,
componentDisplayMode,
// All other named props that you need
...rest
} = this.props;
this.componentProps = {...rest};And in your render(), something like..
render () {
const Component = this.componentProps.component;
return <Component name="filestack" onClick={this.onClickPick} {...this.componentProps} />
}I noticed that filestack asks for unnecessary permissions on services
As you can see it is asking for read, send, delete and manage emails.
Just read might be enough, don't it?
Same thing goes to google drive.
I don't think this is related to filestack-react might be to filestack-js but since I'm using this package this is why I'm creating the issue here.
Filestack-js is on version 0.6.0 as of today.
I would love to be able to use #7
The latest is 0.6.6 right now but does not contain that fix.
Thanks for that module!
Just installed latest, and am seeing:
SyntaxError: 'import' and 'export' may only appear at the top level (8656:0) while parsing /node_modules/filestack-js/build/browser/index.esm.js
I am using gulp, with babel to transpile to es2015, and this configuration works with other modules. Anything special about this module?
I get this exception when trying to upload a cropped an image. After this error, the upload finishes but the image is not cropped - the original images appears as is.
But I get this error only after going through the react build process (npm run build). When running in development mode (i.e., the app is started using npm start command) the crop operation works fine. Let me know if there is any other information you need here:
react-filestack.js:13 TypeError: a.transform is not a function
at performTransformations (http://localhost:3000/static/js/main.2292896d.js:81:414)
at Array.<anonymous> (http://localhost:3000/static/js/main.2292896d.js:76:27183)
at Gi.e.exports.Gi.dispatch (http://localhost:3000/static/js/main.2292896d.js:77:30797)
at Gi.dispatch (http://localhost:3000/static/js/main.2292896d.js:77:29839)
at a.n.(anonymous function) (http://localhost:3000/static/js/main.2292896d.js:78:1120)
at a.n [as performTransformations] (http://localhost:3000/static/js/main.2292896d.js:75:27609)
at a.destroyed (http://localhost:3000/static/js/main.2292896d.js:80:5453)
at de (http://localhost:3000/static/js/main.2292896d.js:76:3437)
at a.e.exports.e.$destroy (http://localhost:3000/static/js/main.2292896d.js:77:8670)
at destroy (http://localhost:3000/static/js/main.2292896d.js:77:6282)
F @ react-filestack.js:13
de @ react-filestack.js:13
e.exports.e.$destroy @ react-filestack.js:13
destroy @ react-filestack.js:13
y @ react-filestack.js:13
y @ react-filestack.js:13
y @ react-filestack.js:13
y @ react-filestack.js:13
y @ react-filestack.js:13
y @ react-filestack.js:13
e.exports.e.nodeOps @ react-filestack.js:13
e.exports.e.$destroy @ react-filestack.js:13
destroy @ react-filestack.js:13
y @ react-filestack.js:13
e.exports.e.nodeOps @ react-filestack.js:13
e.exports.e.$destroy @ react-filestack.js:13
destroy @ react-filestack.js:13
y @ react-filestack.js:13
y @ react-filestack.js:13
e.exports.e.nodeOps @ react-filestack.js:13
e.exports.e.$destroy @ react-filestack.js:13
destroy @ react-filestack.js:13
y @ react-filestack.js:13
e.exports.e.nodeOps @ react-filestack.js:13
e.exports.e.$destroy @ react-filestack.js:13
handler @ react-filestack.js:13
e.exports.po.run @ react-filestack.js:13
pe @ react-filestack.js:13
(anonymous) @ react-filestack.js:13
e @ react-filestack.js:13
This is my react component:
<ReactFilestack apikey={this.props.fp_api_key} onSuccess={(res) => console.log(res)} componentDisplayMode={{ type: 'button', customText: 'Attach Files', customClass: 'btn btn-info btip pull-right' }} />
Everything works until I hit the upload button, then I get a 403 error. The API key is one that we currently use with the filestack-rails gem, which seems to call a different api endpoint going by the network tab in dev tools.
How do I get this api key to work in the react component?
Thanks.
Filestack bundle size is 300kb right now. It seems to be a bit high for a small library.
Maybe the webpack bundling could be improved?
Rendering filestack using gatsby throws the following error. Please help.
WebpackError: ReferenceError: window is not defined
- filestack-react.js:1 Object../node_modules/filestack-react/dist/filestack-react.js
[lib]/[filestack-react]/dist/filestack-react.js:1:452
Hey,
The latest release (3.0.0) of filestack-react introduces a new bug in IE11:
The page crashes and becomes white because of the component.
Killian
I updated to the latest version of React and now I see the following deprecation warning in the console. I'm using filestack-react v3.1.0.
Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.
- Move code with side effects to componentDidMount, and set initial state in the constructor.
- Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecyclesin your project source folder.
Hey,
When using server-side rendering, and import ReactFilestack from 'filestack-react';, I run into the following problem:
ReferenceError: window is not defined
at Object. (/data/www/studocu/node_modules/filestack-react/dist/webpack:/webpack/universalModuleDefinition:8:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Module._compile (/data/www/studocu/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Object.newLoader [as .js] (/data/www/studocu/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function._load (/usr/local/share/.config/yarn/global/node_modules/@pm2/io/src/metrics/httpMetrics.ts:190:35)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object. (/data/www/studocu/resources/assets/redux/studocu/components/DropArea.jsx:7:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Module._compile (/data/www/studocu/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Object.newLoader [as .jsx] (/data/www/studocu/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function._load (/usr/local/share/.config/yarn/global/node_modules/@pm2/io/src/metrics/httpMetrics.ts:190:35)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object. (/data/www/studocu/resources/assets/redux/studocu/components/lists/DropAreaList.jsx:8:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Module._compile (/data/www/studocu/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Object.newLoader [as .jsx] (/data/www/studocu/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function._load (/usr/local/share/.config/yarn/global/node_modules/@pm2/io/src/metrics/httpMetrics.ts:190:35)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at Object. (/data/www/studocu/resources/assets/redux/studocu/pages/Upload.jsx:33:1)
at Module._compile (internal/modules/cjs/loader.js:759:30)
at Module._compile (/data/www/studocu/node_modules/pirates/lib/index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:770:10)
at Object.newLoader [as .jsx] (/data/www/studocu/node_modules/pirates/lib/index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:628:32)
at Function.Module._load (internal/modules/cjs/loader.js:555:12)
at Function._load (/usr/local/share/.config/yarn/global/node_modules/@pm2/io/src/metrics/httpMetrics.ts:190:35)
at Module.require (internal/modules/cjs/loader.js:666:19)
at require (internal/modules/cjs/helpers.js:16:16)
at handleRender (/data/www/studocu/server.js:202:20)
at Layer.handle [as handle_request] (/data/www/studocu/node_modules/express/lib/router/layer.js:95:5)
at next (/data/www/studocu/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/data/www/studocu/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/data/www/studocu/node_modules/express/lib/router/layer.js:95:5)
at /data/www/studocu/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/data/www/studocu/node_modules/express/lib/router/index.js:335:12)
at next (/data/www/studocu/node_modules/express/lib/router/index.js:275:10)
at /data/www/studocu/node_modules/body-parser/lib/read.js:130:5
at invokeCallback (/data/www/studocu/node_modules/raw-body/index.js:224:16)
at done (/data/www/studocu/node_modules/raw-body/index.js:213:7)
at IncomingMessage.onEnd (/data/www/studocu/node_modules/raw-body/index.js:273:7)
at IncomingMessage.emit (events.js:201:15)
at IncomingMessage.EventEmitter.emit (domain.js:471:20)
at endReadableNT (_stream_readable.js:1130:12)
at processTicksAndRejections (internal/process/task_queues.js:84:9)
So I have to conditionally import the component, which is not really convenient:
let ReactFilestack;
if (typeof window !== 'undefined' && window !== null) {
ReactFilestack = require('filestack-react').default;
}
Because of that I also have a mismatch between server and client sides, as the button is not rendered on the server side but is on the client side.
The filestack-react version I use is 2.0.6.
First of all, thanks for putting together a React component for all of us Filestack users!
As a feature request I'd love to see more optional callbacks such as onFileUploadProgress and those listed in https://www.filestack.com/docs/javascript-api/pick-v3.
Is adding any more of these callbacks on the roadmap?
warning "[email protected]" has incorrect peer dependency "react@^15.3.0".
Feature Request: Custom Designed button > Allow buttonText to accept JSX
This actually works to do what I want, I am passing JSX for an icon and text, and it does render the button correctly (with some CSS help), but it would be nice if it didn't throw an error...looks like it is just a matter of changing the prop type to accept an ob<ReactFilestack
apikey={apiKey}
buttonText={<AddCircle className={${classes.addCircleIcon} ${classes.addCircleIconLibraryContent}} />Add Content to Library}
buttonClass={${classes.addButton} ${classes.addButtonLibraryContent}}
options={options}
onSuccess={this.uploadSuccess}ject?
<ReactFilestack
apikey={apiKey}
buttonText={<span><AddCircle className={`${classes.addCircleIcon} ${classes.addCircleIconLibraryContent}`} />Add Content to Library</span>}
buttonClass={`${classes.addButton} ${classes.addButtonLibraryContent}`}
options={options}
onSuccess={this.uploadSuccess}
/>
Would it be possible to add a dropdown of file types against each file they want to upload for the user to select from, for example:
This could then append the selected file type to the file name, or create a new directory on Filestack based on the file type selected.
Or is there a way to do this already, which I haven't come across?
Thanks.
According to the filestack documentation for pick (https://www.filestack.com/docs/javascript-api/pick-v3), an app is allowed to use fromSources with the value of 'url' to allow a link to be used to upload a file. It also says that this is the default. However using the filestack react component 'url' is not turned on by default and when I attempt to use it in the fromSources option, I get an error with Unknown source 'url'. Did some looking at the source code and found a reference to 'source-url' being a valid fromSource, however while that enabled the link menu on the left, it did not load any UI to allow a user to type a link.
Am I missing something here?
I read the whole source code for src/ReactFilestack.jsx but I can't find the part where filestack attach itself to the dom.. somehow it just magically .. did.
if possible you can point me to the line that the dom attachment happens?https://github.com/filestack/filestack-react/blob/master/src/ReactFilestack.jsx
Thanks!
The links in Readme are not correct:
https://filestack.github.io gives a 404
and https://www.zerocho.com/portfolio/ReactFilestack gives a Cloudflare error
Hi,
The picker option "viewType" ins't available.
https://filestack.github.io/filestack-js/interfaces/pickeroptions.html#viewtype
<ReactFilestack
apikey='FS_API_KEY'
options={{
viewType: 'grid',
maxSize: 10 * 1024 * 1024,
}}
preload={true}
/>
The above code give : Uncaught (in promise) Error: Unknown config option "viewType"
version: 2.0.6
Hi,
I am using react + meteor, the code works well on local environment but when I move it to production (Heroku) all breaks and here is the error,
Any help will be appreciated. I tried the https://github.com/babel/babili with Heroku but does not work.
I'm getting this issue using filestack-rect. Is there a similar solution?
Hey @ZeroCho I was wondering if you could publish on npm again as the documentation is still for the 0.5.3 version. Now it's 0.6.4.
Hey guys, I'd like to preload filestack client before the user hits the button for picking a file. This improves our UX since there's a tiny delay between the client load and the actual picker UI render
If I set none or all 3 properties it works fine. But if I only set 'customText' I get a crash. This was surprising since all three options have defaults.
componentDisplayMode={{
customText: "Image",
}}When using react 16, getting the following error:
[email protected]" has incorrect peer dependency "react@^15.5.4"
When I choose the web option for the dropPane then the dropPane is showed without any button. With react I only seem to be able to do it with a click on the button first. Is there any way around this?
Thanks!
Hi,
I'm trying to use this library for the first time in my react app and I have the error message below when I click on the button "Pick a File":
Uncaught TypeError: Cannot read property 'init' of undefined
at t.r.initClient (filestack-react.js:1)
at r.onClickPick (filestack-react.js:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:100)
at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
at Object.invokeGuardedCallback (react-dom.development.js:187)
at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
at executeDispatch (react-dom.development.js:461)
at executeDispatchesInOrder (react-dom.development.js:483)
at executeDispatchesAndRelease (react-dom.development.js:581)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
at forEachAccumulated (react-dom.development.js:562)
at runEventsInBatch (react-dom.development.js:723)
at runExtractedEventsInBatch (react-dom.development.js:732)
at handleTopLevel (react-dom.development.js:4472)
at batchedUpdates$1 (react-dom.development.js:16537)
at batchedUpdates (react-dom.development.js:2131)
at dispatchEvent (react-dom.development.js:4551)
at interactiveUpdates$1 (react-dom.development.js:16592)
at interactiveUpdates (react-dom.development.js:2150)
at dispatchInteractiveEvent (react-dom.development.js:4528)
I am simply adding the following to my application:
import ReactFilestack from 'filestack-react'
const onSuccess = result => {
console.log('result', result);
};
const options = {
accept: 'image/*',
maxFiles: 5,
storeTo: {
location: 's3',
},
};
const apiKey = "MY API KEY"
<form>
<div>Test</div>
<ReactFilestack
apikey={apiKey}
mode="upload"
options={options}
onSuccess={onSuccess}
/>
</form>
Is it maybe linked to my version of React ? I'm using create-react-app with react v.16.4.0
Thanks in advance for your help!
After changing code from
const filestack = require('filestack-js').default
from
import filestack from 'filestack-js';
Following issue happens when I try to render a component with react-filestack on the server
ReferenceError: File is not defined
Because there is no File object in the server, this component cannot import filestack-js on the server.
That is why I didn't import 'filestack-js', but require('filestack-js').default inside the click handler which only renders in client,
Hi,
I was trying to use filestack-react in typescript, but it didn't suppose @typescript.
Can anyone resolve this issue?
Hello! To begin with, thanks so much for writing this component! Up to now I was using a custom made component but after the intro of the v3 library I never found the time to update it.
As per the documentation, I tried to import the filestack client (import { client } from 'filestack-react';) but it was undefined. After a bit of digging I realized that it's not really exported. The entry point defined in webpack.config.js points to ./src/ReactFilestack that exports only the ReactFilestack component.
Can you please export the filestack client as per the documentation? I'm happy to raise a pr if you want.
Thanks,
/s
It appears that filestack-react does not support the exposeOrginalFile option, however filestack-js does (in older versions, see below).
After inspecting the source of the ReactFileStack component, it simply appears to passing the options object into the filestack-js client, however the following error is thrown when using this option with the ReactFileStack component.
Error: Unknown config option "exposeOriginalFile"
at upload_queue.js:289
at Array.forEach (<anonymous>)
at e (upload_queue.js:285)
at upload_queue.js:366
at filestack-react.js:6
at <anonymous>
As filestack-react appears to be a simple react component wrapping filestack-js, which is then a simple wrapper for the api-client package hosted on the FileStack servers, should this not be working?
I've confirmed this behaviour in a very simple react application here
In the same repo you will find non-react-test.html which demonstrates the option working when using the library directly from the FileStack website.
I was however able to use the exposeOriginalFile option in a react application without using the FIle Stack provided react components, but instead installed filestack-js and used the client that way. To do this, I had to install version 0.9.7 specifically, which appears to be the version in which the exposeOriginalFile option was implemented.
When running NODE_ENV = production produces following client console error:
Uncaught TypeError: r.emit is not a function
at XMLHttpRequest.t.onreadystatechange
Application:
Meteor v1.3.5.1 / React / React-router
Packages:
"dependencies": {
"babel-preset-babili": "^0.1.2",
"can-use-dom": "^0.1.0",
"classnames": "^2.2.3",
"d3": "^3.5.17",
"fibers": "^1.0.13",
"fs": "0.0.2",
"google-map-react": "^0.11.2",
"lodash": "^4.13.1",
"meteor-node-stubs": "^0.2.3",
"moment": "^2.13.0",
"npm": "^3.9.5",
"react": "^15.1.0",
"react-addons-create-fragment": "^15.0.1",
"react-addons-css-transition-group": "^15.0.1",
"react-addons-linked-state-mixin": "^15.0.1",
"react-addons-perf": "^15.0.1",
"react-addons-pure-render-mixin": "^15.1.0",
"react-addons-test-utils": "^15.0.1",
"react-addons-transition-group": "^15.0.1",
"react-addons-update": "^15.0.1",
"react-bootstrap": "^0.30.3",
"react-bootstrap-date-picker": "^3.3.1",
"react-dom": "^15.1.0",
"react-dropzone": "^3.5.1",
"react-filestack": "^0.9.1",
"react-google-maps": "^4.11.0",
"react-helmet": "^3.1.0",
"react-pure-render": "^1.0.2",
"react-redux": "^4.4.5",
"react-router": "^2.4.1",
"redux": "^3.5.2",
"request": "^2.73.0"
}
Screenshot:
1.3.5
1 - Open picker
2 - Select photo
3 - Reduce both sides of the photo crop area
4 - Click at one corner of the crop area and expand it to match the photo limit
The opposite side bounds expand a little bit each time. But the faster the movement the more it expands.
Only the side I am dragging should have its bounds resized
hi! loving this package so far, and I just updated to take advantage of the custom rendering mode, but am now getting a warning in my console about using PropTypes directly:
Warning: Failed prop type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types
I also see this same error message in the react-filestack.js minified file
any help you can provide would be great, I do know that i'm using a slightly older react version than is specified in the devDependencies, but i'm using a version greater than that set in the peerDependencies. not sure if there's anything else i can do on my end though.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.