Skip to content

Commit 77a6627

Browse files
samuxyzsamuxyz
committed
update filestack-js to 0.9.1 and added more examples
1 parent e353a7d commit 77a6627

File tree

20 files changed

+4998
-91
lines changed

20 files changed

+4998
-91
lines changed

‎README.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
[![NPM Version](https://img.shields.io/badge/npm-1.3.5-red.svg)](https://www.npmjs.com/package/filestack-react)
1+
[![NPM Version](https://img.shields.io/badge/npm-1.3.6-red.svg)](https://www.npmjs.com/package/filestack-react)
22
[![coverage](https://img.shields.io/badge/coverage-100%25-red.svg)](https://www.npmjs.com/package/filestack-react)
33
[![Package Quality](http://npm.packagequality.com/shield/react-filestack.svg)](http://packagequality.com/#?package=react-filestack)
44

@@ -128,7 +128,7 @@ const filestack = client.init('YOUR_API_KEY', security);
128128

129129
## Examples
130130

131-
You can find the example in ``/examples/demo``.
131+
You can find the examples of using Pick in ``/examples/demo``.
132132

133133
Run
134134

@@ -138,6 +138,8 @@ yarn start
138138

139139
and connect to localhost:8080.
140140

141+
To try different functions go to ``/examples/demo2`` and follow the same steps to run it.
142+
141143
![filestack](https://cloud.githubusercontent.com/assets/10962668/23750309/ac3e1080-050f-11e7-922d-ee9deb8251a3.png)
142144

143145

‎examples/demo/components/Container.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import ReactFilestack from '../../../src';
4+
import styles from '../style.css';
5+
6+
const onSuccess = result => {
7+
console.log('result', result);
8+
};
9+
10+
const onError = error => {
11+
console.error('error', error);
12+
};
13+
14+
const basicOptions = {
15+
accept: 'image/*',
16+
fromSources: ['facebook', 'gmail', 'github'],
17+
maxSize: 1024 * 1024,
18+
maxFiles: 3,
19+
};
20+
21+
export default class Container extends Component {
22+
static propTypes = {
23+
apikey: PropTypes.string.isRequired,
24+
};
25+
26+
render () {
27+
const { apikey } = this.props;
28+
return (
29+
<div>
30+
<header>
31+
<img src="https://filestack.com/themes/filestack/assets/images/press-articles/color.svg" />
32+
<h1 className={styles['title']}>Filestack-React <small>Examples</small></h1>
33+
<hr />
34+
</header>
35+
<main>
36+
<form>
37+
<div>Basic button without options, onSuccess, onError</div>
38+
<ReactFilestack apikey={apikey} />
39+
</form>
40+
<form>
41+
<div>Custom link(You can add className on the link to style)</div>
42+
<ReactFilestack apikey={apikey} link onSuccess={onSuccess} onError={onError} />
43+
</form>
44+
45+
<form>
46+
<div>Custom button with custom options and custom styles</div>
47+
<ReactFilestack apikey={apikey} buttonText="I'm customized" buttonClass={styles.customButton} onSuccess={onSuccess} onError={onError} />
48+
</form>
49+
50+
<form>
51+
<div>Button with some options</div>
52+
<ReactFilestack apikey={apikey} options={basicOptions} onSuccess={onSuccess} onError={onError} />
53+
</form>
54+
55+
<form>
56+
<div>Button with children</div>
57+
<ReactFilestack apikey={apikey} link options={basicOptions} onSuccess={onSuccess} onError={onError}>
58+
<strong>Display whatever you want</strong>
59+
</ReactFilestack>
60+
</form>
61+
62+
<form>
63+
<div>Custom render</div>
64+
<ReactFilestack
65+
apikey={apikey}
66+
options={basicOptions}
67+
onSuccess={onSuccess}
68+
onError={onError}
69+
render={({ onPick }) => (
70+
<div>
71+
<strong>Find an avatar </strong>
72+
<button onClick={onPick}>Pick</button>
73+
</div>
74+
)}
75+
/>
76+
</form>
77+
</main>
78+
</div>
79+
);
80+
}
81+
}

‎examples/demo/components/components/Container.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import ReactFilestack from '../../../src';
4+
import styles from '../style.css';
5+
6+
const onSuccess = result => {
7+
console.log('result', result);
8+
};
9+
10+
const onError = error => {
11+
console.error('error', error);
12+
};
13+
14+
const basicOptions = {
15+
accept: 'image/*',
16+
fromSources: ['facebook', 'gmail', 'github'],
17+
maxSize: 1024 * 1024,
18+
maxFiles: 3,
19+
};
20+
21+
export default class Container extends Component {
22+
static propTypes = {
23+
apikey: PropTypes.string.isRequired,
24+
};
25+
26+
render () {
27+
const { apikey } = this.props;
28+
return (
29+
<div>
30+
<header>
31+
<img src="https://filestack.com/themes/filestack/assets/images/press-articles/color.svg" />
32+
<h1 className={styles['title']}>Filestack-React <small>Examples</small></h1>
33+
<hr />
34+
</header>
35+
<main>
36+
<form>
37+
<div>Basic button without options, onSuccess, onError</div>
38+
<ReactFilestack apikey={apikey} />
39+
</form>
40+
<form>
41+
<div>Custom link(You can add className on the link to style)</div>
42+
<ReactFilestack apikey={apikey} link onSuccess={onSuccess} onError={onError} />
43+
</form>
44+
45+
<form>
46+
<div>Custom button with custom options and custom styles</div>
47+
<ReactFilestack apikey={apikey} buttonText="I'm customized" buttonClass={styles.customButton} onSuccess={onSuccess} onError={onError} />
48+
</form>
49+
50+
<form>
51+
<div>Button with some options</div>
52+
<ReactFilestack apikey={apikey} options={basicOptions} onSuccess={onSuccess} onError={onError} />
53+
</form>
54+
55+
<form>
56+
<div>Button with children</div>
57+
<ReactFilestack apikey={apikey} link options={basicOptions} onSuccess={onSuccess} onError={onError}>
58+
<strong>Display whatever you want</strong>
59+
</ReactFilestack>
60+
</form>
61+
62+
<form>
63+
<div>Custom render</div>
64+
<ReactFilestack
65+
apikey={apikey}
66+
options={basicOptions}
67+
onSuccess={onSuccess}
68+
onError={onError}
69+
render={({ onPick }) => (
70+
<div>
71+
<strong>Find an avatar </strong>
72+
<button onClick={onPick}>Pick</button>
73+
</div>
74+
)}
75+
/>
76+
</form>
77+
</main>
78+
</div>
79+
);
80+
}
81+
}

‎examples/demo/components/dist/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<meta name="description" content="">
8+
<meta name="author" content="Sam Zaza">
9+
<link rel="icon" href="https://assets.filestackapi.com/web/c3417dc/img/favicon.ico">
10+
<title>Filestack-React</title>
11+
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
12+
</head>
13+
<body>
14+
<div id="app"></div>
15+
<script src="demo.js"></script>
16+
</body>
17+
</html>

‎examples/demo/dist/index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
1212
</head>
1313
<body>
14-
<script src="demo.js"></script>
14+
<div id="app"></div>
15+
<script src="demo.js"></script>
1516
</body>
1617
</html>

‎examples/demo/index.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
import { client } from '../../src';
4+
import Container from './components/Container';
5+
6+
const apikey = 'Acu94EFL1STGYvkM6a8usz';
7+
8+
render (
9+
<Container apikey={apikey} />,
10+
document.getElementById('app'),
11+
);
12+
13+
// Directly call Filestack client
14+
const log = result => console.log(JSON.stringify(result));
15+
const filestack = client.init(apikey);
16+
filestack.metadata('FGs2lXrQRziCX06TBvC1', { height: true, width: true }).then(log);

‎examples/demo/index.jsx

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎examples/demo/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"version": "1.0.0",
44
"main": "index.js",
55
"author": "Sam Zaza",
6+
"email" : "zaza.samuele@gmail.com",
67
"license": "MIT",
78
"scripts": {
89
"start": "webpack-dev-server"
@@ -23,6 +24,7 @@
2324
"webpack-dev-server": "^2.7.1"
2425
},
2526
"dependencies": {
27+
"prop-types": "^15.5.10",
2628
"react": "^15.6.1",
2729
"react-dom": "^15.6.1"
2830
}

‎examples/demo/webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const fs = require('fs');
44
const rules = require('./webpack.loaders');
55

66
const config = {
7-
entry: './index.jsx',
7+
entry: './index.js',
88
output: {
99
path: path.join(__dirname, 'dist'),
1010
filename: 'demo.js'

‎examples/demo2/.babelrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }],
4+
"react",
5+
"stage-1"
6+
]
7+
}

0 commit comments

Comments
 (0)