mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-25 11:14:05 +00:00
examples: make React example up-to-date (#5205)
This commit is contained in:
Merlijn Vos
GitHub
parent
28767b4cf4
commit
c148139295
8 changed files with 80 additions and 132 deletions
|
|
@ -1,114 +0,0 @@
|
|||
/* eslint-disable */
|
||||
import React from'react'
|
||||
import Uppy from'@uppy/core'
|
||||
import Tus from'@uppy/tus'
|
||||
import GoogleDrive from '@uppy/google-drive'
|
||||
import Webcam from '@uppy/webcam'
|
||||
import RemoteSources from '@uppy/remote-sources'
|
||||
import { Dashboard, DashboardModal, DragDrop, ProgressBar, FileInput } from'@uppy/react'
|
||||
|
||||
import '@uppy/core/dist/style.css'
|
||||
import '@uppy/dashboard/dist/style.css'
|
||||
import '@uppy/drag-drop/dist/style.css'
|
||||
import '@uppy/file-input/dist/style.css'
|
||||
import '@uppy/progress-bar/dist/style.css'
|
||||
|
||||
export default class App extends React.Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
this.state = {
|
||||
showInlineDashboard: false,
|
||||
open: false
|
||||
}
|
||||
|
||||
this.uppy = new Uppy({ id: 'uppy1', autoProceed: true, debug: true })
|
||||
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
|
||||
.use(Webcam)
|
||||
.use(RemoteSources, { companionUrl: 'https://companion.uppy.io', sources: ['GoogleDrive', 'Box', 'Dropbox', 'Facebook', 'Instagram', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
|
||||
})
|
||||
|
||||
this.uppy2 = new Uppy({ id: 'uppy2', autoProceed: false, debug: true })
|
||||
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
|
||||
|
||||
this.handleModalClick = this.handleModalClick.bind(this)
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.uppy.close({ reason: 'unmount' })
|
||||
this.uppy2.close({ reason: 'unmount' })
|
||||
}
|
||||
|
||||
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}
|
||||
plugins={['GoogleDrive']}
|
||||
metaFields={[
|
||||
{ id: 'name', name: 'Name', placeholder: 'File name' }
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
|
||||
<h2>Modal Dashboard</h2>
|
||||
<div>
|
||||
<button onClick={this.handleModalClick}>
|
||||
{this.state.open ? 'Close dashboard' : 'Open dashboard'}
|
||||
</button>
|
||||
<DashboardModal
|
||||
uppy={this.uppy2}
|
||||
open={this.state.open}
|
||||
target={document.body}
|
||||
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}
|
||||
hideAfterFinish={false}
|
||||
/>
|
||||
|
||||
<h2>File Input</h2>
|
||||
<FileInput
|
||||
uppy={this.uppy}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
49
examples/react-example/App.tsx
Normal file
49
examples/react-example/App.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
/* eslint-disable */
|
||||
import React from 'react'
|
||||
import Uppy from '@uppy/core'
|
||||
import Tus from '@uppy/tus'
|
||||
import Webcam from '@uppy/webcam'
|
||||
import RemoteSources from '@uppy/remote-sources'
|
||||
import { Dashboard, useUppyState } from '@uppy/react'
|
||||
|
||||
import '@uppy/core/dist/style.css'
|
||||
import '@uppy/dashboard/dist/style.css'
|
||||
import '@uppy/drag-drop/dist/style.css'
|
||||
import '@uppy/file-input/dist/style.css'
|
||||
import '@uppy/progress-bar/dist/style.css'
|
||||
|
||||
const metaFields = [
|
||||
{ id: 'license', name: 'License', placeholder: 'specify license' },
|
||||
]
|
||||
|
||||
function createUppy() {
|
||||
return new Uppy({ restrictions: { requiredMetaFields: ['license'] } })
|
||||
.use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
|
||||
.use(Webcam)
|
||||
.use(RemoteSources, {
|
||||
companionUrl: 'https://companion.uppy.io',
|
||||
})
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
// IMPORTANT: passing an initaliser function to useState
|
||||
// to prevent creating a new Uppy instance on every render.
|
||||
// useMemo is a performance hint, not a guarantee.
|
||||
const [uppy] = React.useState(createUppy)
|
||||
// You can access state reactively with useUppyState
|
||||
const fileCount = useUppyState(
|
||||
uppy,
|
||||
(state) => Object.keys(state.files).length,
|
||||
)
|
||||
const totalProgress = useUppyState(uppy, (state) => state.totalProgress)
|
||||
// Also possible to get the state of all plugins.
|
||||
const plugins = useUppyState(uppy, (state) => state.plugins)
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>File count: {fileCount}</p>
|
||||
<p>Total progress: {totalProgress}</p>
|
||||
<Dashboard uppy={uppy} metaFields={metaFields} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -8,6 +8,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script src="./main.jsx" type="module"></script>
|
||||
<script src="./main.tsx" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
/* eslint-disable */
|
||||
import React from 'react'
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import App from './App.jsx'
|
||||
|
||||
createRoot(document.querySelector('#app')).render(
|
||||
<App />
|
||||
)
|
||||
6
examples/react-example/main.tsx
Normal file
6
examples/react-example/main.tsx
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* eslint-disable */
|
||||
import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.querySelector('#app')).render(<App />)
|
||||
|
|
@ -5,11 +5,8 @@
|
|||
"dependencies": {
|
||||
"@uppy/core": "workspace:*",
|
||||
"@uppy/dashboard": "workspace:*",
|
||||
"@uppy/drag-drop": "workspace:*",
|
||||
"@uppy/file-input": "workspace:*",
|
||||
"@uppy/google-drive": "workspace:*",
|
||||
"@uppy/progress-bar": "workspace:*",
|
||||
"@uppy/react": "workspace:*",
|
||||
"@uppy/remote-sources": "workspace:*",
|
||||
"@uppy/tus": "workspace:*",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
|
|
|
|||
21
examples/react-example/tsconfig.json
Normal file
21
examples/react-example/tsconfig.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"jsxImportSource": "react",
|
||||
"jsx": "react-jsx",
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "es2022",
|
||||
"allowJs": true,
|
||||
"resolveJsonModule": true,
|
||||
"moduleDetection": "force",
|
||||
"isolatedModules": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"strict": true,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"noImplicitOverride": true,
|
||||
"module": "NodeNext",
|
||||
"outDir": "dist",
|
||||
"sourceMap": true,
|
||||
"lib": ["es2022", "dom", "dom.iterable"],
|
||||
},
|
||||
}
|
||||
|
|
@ -8659,11 +8659,8 @@ __metadata:
|
|||
dependencies:
|
||||
"@uppy/core": "workspace:*"
|
||||
"@uppy/dashboard": "workspace:*"
|
||||
"@uppy/drag-drop": "workspace:*"
|
||||
"@uppy/file-input": "workspace:*"
|
||||
"@uppy/google-drive": "workspace:*"
|
||||
"@uppy/progress-bar": "workspace:*"
|
||||
"@uppy/react": "workspace:*"
|
||||
"@uppy/remote-sources": "workspace:*"
|
||||
"@uppy/tus": "workspace:*"
|
||||
"@vitejs/plugin-react": "npm:^4.0.0"
|
||||
react: "npm:^18.0.0"
|
||||
|
|
@ -9040,7 +9037,7 @@ __metadata:
|
|||
languageName: unknown
|
||||
linkType: soft
|
||||
|
||||
"@uppy/file-input@workspace:*, @uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input":
|
||||
"@uppy/file-input@workspace:^, @uppy/file-input@workspace:packages/@uppy/file-input":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "@uppy/file-input@workspace:packages/@uppy/file-input"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue