Mirrors/uppy
1
0
Fork 0
mirror of https://github.com/transloadit/uppy.git synced 2026-08-03 07:13:04 +00:00
Code Issues Projects Releases Wiki Activity

react: Add React components example

Browse source
This commit is contained in:
Renée Kooi 2017-08-28 13:35:53 +02:00
parent c465155186
commit 56ef40122d
No known key found for this signature in database
GPG key ID: 30516CF2A8E63718
8 changed files with 2140 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
examples/react-example/.babelrc Normal file
View file

@ -0,0 +1,5 @@
{
"presets": [
"react"
]
}

3
examples/react-example/.gitignore vendored Normal file
View file

@ -0,0 +1,3 @@
bundle.js
uppy.min.css
bundle.js.*

86
examples/react-example/App.js vendored Normal file
View file

@ -0,0 +1,86 @@
/* eslint-disable */
const React = require('react')
const Uppy = require('uppy/lib/core')
const Tus10 = require('uppy/lib/plugins/Tus10')
const { Dashboard, DashboardModal, DragDrop, ProgressBar } = require('uppy/lib/uppy-react')
module.exports = class App extends React.Component {
constructor (props) {
super(props)
this.state = {
showInlineDashboard: false,
open: false
}
this.handleModalClick = this.handleModalClick.bind(this)
}
componentWillMount () {
this.uppy = new Uppy({ autoProceed: false })
.use(Tus10, { endpoint: 'https://master.tus.io/files' })
.run()
}
componentWillUnmount () {
this.uppy.close()
}
handleModalClick () {
this.setState({
open: !this.state.open
})
}
render () {
const { showInlineDashboard } = this.state
return (
<div>
<h1>React Examples</h1>
<h2>Inline Dashboard</h2>
<label>
<input
type="checkbox"
checked={showInlineDashboard}
onChange={(event) => {
this.setState({
showInlineDashboard: event.target.checked
})
}}
/>
Show Dashboard
</label>
{showInlineDashboard && (
<Dashboard uppy={this.uppy} />
)}
<h2>Modal Dashboard</h2>
<div>
<button onClick={this.handleModalClick}>
{this.state.open ? 'Close dashboard' : 'Open dashboard'}
</button>
<DashboardModal
uppy={this.uppy}
open={this.state.open}
onRequestClose={() => this.setState({ open: false })}
/>
</div>
<h2>Drag Drop Area</h2>
<DragDrop
uppy={this.uppy}
locale={{
strings: {
chooseFile: 'Boop a file',
orDragDrop: 'or yoink it here'
}
}}
/>
<h2>Progress Bar</h2>
<ProgressBar uppy={this.uppy} />
</div>
)
}
}

13
examples/react-example/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Uppy React Example</title>
<link href="uppy.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>

8
examples/react-example/main.js vendored Normal file
View file

@ -0,0 +1,8 @@
/* eslint-disable */
const React = require('react')
const ReactDOM = require('react-dom')
const App = require('./App')
ReactDOM.render((
<App />
), document.querySelector('#app'))

1957
examples/react-example/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

19
examples/react-example/package.json Normal file
View file

@ -0,0 +1,19 @@
{
"private": true,
"name": "uppy-react-example",
"scripts": {
"start": "node ./serve.js"
},
"devDependencies": {
"aliasify": "^2.1.0",
"babelify": "^7.3.0",
"browserify": "^14.4.0",
"fs-write-stream-atomic": "^1.0.10"
},
"dependencies": {
"babel-preset-react": "^6.24.1",
"ecstatic": "^2.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1"
}
}

49
examples/react-example/serve.js vendored Normal file
View file

@ -0,0 +1,49 @@
const path = require('path')
const fs = require('fs')
const http = require('http')
const ecstatic = require('ecstatic')
const createWriteStream = require('fs-write-stream-atomic')
const browserify = require('browserify')
const watchify = require('watchify')
const aliasify = require('aliasify')
const babelify = require('babelify')
const port = process.env.PORT || 8080
const b = browserify({
cache: {},
packageCache: {},
debug: true,
entries: path.join(__dirname, './main.js')
})
b.plugin(watchify)
b.transform(babelify)
b.transform(aliasify, {
global: true,
replacements: {
'^uppy/lib/(.*?)$': path.join(__dirname, '../../src/$1'),
'^react$': require.resolve('react'),
'^react-dom$': require.resolve('react-dom')
}
})
function bundle () {
return b.bundle()
.pipe(createWriteStream(path.join(__dirname, './bundle.js')))
}
b.on('log', console.log)
b.on('update', bundle)
b.on('error', console.error)
bundle()
fs.createReadStream(path.join(__dirname, '../../dist/uppy.min.css'))
.pipe(fs.createWriteStream(path.join(__dirname, './uppy.min.css')))
const server = http.createServer(ecstatic({ root: __dirname }))
server.listen(port, () => {
console.log(`Listening on port ${port}`)
})