Skip to content

Commit d50fadb

Browse files
mifimifi
committed
add react dev dashboard
ruse dashboard
1 parent df1e472 commit d50fadb

File tree

7 files changed

+105
-40
lines changed

7 files changed

+105
-40
lines changed

‎private/dev/Dashboard.js

+13-36
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
// The @uppy/ dependencies are resolved from source
22
/* eslint-disable import/no-extraneous-dependencies */
33
import Uppy, { debugLogger } from '@uppy/core'
4-
import Dashboard from '@uppy/dashboard'
54
import RemoteSources from '@uppy/remote-sources'
65
import Webcam from '@uppy/webcam'
76
import ScreenCapture from '@uppy/screen-capture'
@@ -11,7 +10,6 @@ import AwsS3 from '@uppy/aws-s3'
1110
import AwsS3Multipart from '@uppy/aws-s3-multipart'
1211
import XHRUpload from '@uppy/xhr-upload'
1312
import Transloadit from '@uppy/transloadit'
14-
import Form from '@uppy/form'
1513
import ImageEditor from '@uppy/image-editor'
1614
import DropTarget from '@uppy/drop-target'
1715
import Audio from '@uppy/audio'
@@ -77,10 +75,7 @@ function getCompanionKeysParams (name) {
7775

7876
// Rest is implementation! Obviously edit as necessary...
7977

80-
export default () => {
81-
const restrictions = undefined
82-
// const restrictions = { requiredMetaFields: ['caption'], maxNumberOfFiles: 3 }
83-
78+
export default ({ restrictions } = {}) => {
8479
const uppyDashboard = new Uppy({
8580
logger: debugLogger,
8681
meta: {
@@ -90,44 +85,29 @@ export default () => {
9085
allowMultipleUploadBatches: false,
9186
restrictions,
9287
})
93-
.use(Dashboard, {
94-
trigger: '#pick-files',
95-
// inline: true,
96-
target: '.foo',
97-
metaFields: [
98-
{ id: 'license', name: 'License', placeholder: 'specify license' },
99-
{ id: 'caption', name: 'Caption', placeholder: 'add caption' },
100-
],
101-
showProgressDetails: true,
102-
proudlyDisplayPoweredByUppy: true,
103-
note: `${JSON.stringify(restrictions)}`,
104-
})
105-
.use(GoogleDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts, ...getCompanionKeysParams('GOOGLE_DRIVE') })
106-
// .use(Instagram, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
107-
// .use(Dropbox, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
108-
// .use(Box, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
109-
// .use(Facebook, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
110-
// .use(OneDrive, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
111-
// .use(Zoom, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
112-
// .use(Url, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
113-
// .use(Unsplash, { target: Dashboard, companionUrl: COMPANION_URL, companionAllowedHosts })
88+
.use(GoogleDrive, { companionUrl: COMPANION_URL, companionAllowedHosts, ...getCompanionKeysParams('GOOGLE_DRIVE') })
89+
// .use(Instagram, { companionUrl: COMPANION_URL, companionAllowedHosts })
90+
// .use(Dropbox, { companionUrl: COMPANION_URL, companionAllowedHosts })
91+
// .use(Box, { companionUrl: COMPANION_URL, companionAllowedHosts })
92+
// .use(Facebook, { companionUrl: COMPANION_URL, companionAllowedHosts })
93+
// .use(OneDrive, { companionUrl: COMPANION_URL, companionAllowedHosts })
94+
// .use(Zoom, { companionUrl: COMPANION_URL, companionAllowedHosts })
95+
// .use(Url, { companionUrl: COMPANION_URL, companionAllowedHosts })
96+
// .use(Unsplash, { companionUrl: COMPANION_URL, companionAllowedHosts })
11497
.use(RemoteSources, {
11598
companionUrl: COMPANION_URL,
11699
sources: ['Box', 'Dropbox', 'Facebook', 'Instagram', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
117100
companionAllowedHosts,
118101
})
119102
.use(Webcam, {
120-
target: Dashboard,
121103
showVideoSourceDropdown: true,
122104
showRecordingLength: true,
123105
})
124106
.use(Audio, {
125-
target: Dashboard,
126107
showRecordingLength: true,
127108
})
128-
.use(ScreenCapture, { target: Dashboard })
129-
.use(Form, { target: '#upload-form' })
130-
.use(ImageEditor, { target: Dashboard })
109+
.use(ScreenCapture)
110+
.use(ImageEditor)
131111
.use(DropTarget, {
132112
target: document.body,
133113
})
@@ -185,8 +165,6 @@ export default () => {
185165
uppyDashboard.use(GoldenRetriever, { serviceWorker: true })
186166
}
187167

188-
window.uppy = uppyDashboard
189-
190168
uppyDashboard.on('complete', (result) => {
191169
if (result.failed.length === 0) {
192170
console.log('Upload successful 😀')
@@ -200,6 +178,5 @@ export default () => {
200178
}
201179
})
202180

203-
const modalTrigger = document.querySelector('#pick-files')
204-
if (modalTrigger) modalTrigger.click()
181+
return uppyDashboard
205182
}

‎private/dev/React.jsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* eslint-disable react/react-in-jsx-scope, import/no-extraneous-dependencies */
2+
// eslint-disable-next-line no-unused-vars
3+
import { createElement as h, useState, useCallback } from 'react';
4+
// eslint-disable-next-line import/no-unresolved
5+
import { createRoot } from 'react-dom/client';
6+
7+
import '@uppy/core/dist/style.css';
8+
import '@uppy/dashboard/dist/style.css';
9+
10+
import { Dashboard } from '@uppy/react';
11+
12+
import DashboardUppy from './Dashboard.js'
13+
14+
15+
function App() {
16+
const [uppy] = useState(() => DashboardUppy());
17+
18+
const [i, setI] = useState(0);
19+
20+
// https://github.com/transloadit/uppy/issues/5248
21+
const handleDoneButtonClick = useCallback(() => {
22+
setI(i + 1);
23+
console.log('Done button clicked', i);
24+
}, [i]);
25+
26+
return (
27+
<div>
28+
<h1>React Uppy</h1>
29+
<Dashboard uppy={uppy} doneButtonHandler={handleDoneButtonClick} />
30+
</div>
31+
);
32+
}
33+
34+
const container = document.getElementById('root');
35+
const root = createRoot(container);
36+
root.render(<App />);

‎private/dev/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@
4242
<main class="foo">
4343
<h1>Dashboard is here</h1>
4444

45+
<p><a href="/react.html">React dashboard</a></p>
46+
<p><a href="/dragdrop.html">DragDrop</a></p>
47+
4548
<!-- some inputs in a form to check focus management in Dashboard -->
4649
<form id="upload-form" action="/">
4750
<button type="button" id="pick-files">Pick Files</button><br />

‎private/dev/index.js

+33-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
1+
// eslint-disable-next-line import/no-extraneous-dependencies
2+
import Form from '@uppy/form'
3+
4+
// eslint-disable-next-line import/no-extraneous-dependencies
5+
import Dashboard from '@uppy/dashboard'
6+
17
// eslint-disable-next-line import/no-extraneous-dependencies
28
import 'uppy/src/style.scss'
39

410
import DragDrop from './DragDrop.js'
5-
import Dashboard from './Dashboard.js'
11+
import DashboardUppy from './Dashboard.js'
12+
613

714
switch (window.location.pathname.toLowerCase()) {
815
case '/':
9-
case '/dashboard.html': Dashboard(); break
16+
case '/dashboard.html': {
17+
const restrictions = undefined
18+
// const restrictions = { requiredMetaFields: ['caption'], maxNumberOfFiles: 3 }
19+
20+
const uppy = DashboardUppy({ restrictions })
21+
.use(Dashboard, {
22+
trigger: '#pick-files',
23+
// inline: true,
24+
target: '.foo',
25+
metaFields: [
26+
{ id: 'license', name: 'License', placeholder: 'specify license' },
27+
{ id: 'caption', name: 'Caption', placeholder: 'add caption' },
28+
],
29+
showProgressDetails: true,
30+
proudlyDisplayPoweredByUppy: true,
31+
note: `${JSON.stringify(restrictions)}`,
32+
})
33+
.use(Form, { target: '#upload-form' })
34+
35+
window.uppy = uppy
36+
37+
const modalTrigger = document.querySelector('#pick-files')
38+
if (modalTrigger) modalTrigger.click()
39+
}
40+
break
1041
case '/dragdrop.html': DragDrop(); break
1142
default: throw new Error('404')
1243
}

‎private/dev/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@
1313
"autoprefixer": "^10.2.6",
1414
"postcss-dir-pseudo-class": "^6.0.0",
1515
"postcss-logical": "^5.0.0",
16+
"react": "^18.3.1",
17+
"react-dom": "^18.3.1",
1618
"vite": "^5.0.0"
1719
},
1820
"private": true,

‎private/dev/react.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>React</title>
7+
<link rel="icon" type="image/png" href="https://uppy.io/img/logo.svg" />
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/React.jsx"></script>
13+
</body>
14+
</html>

‎yarn.lock

+4-2
Original file line numberDiff line numberDiff line change
@@ -8097,6 +8097,8 @@ __metadata:
80978097
autoprefixer: "npm:^10.2.6"
80988098
postcss-dir-pseudo-class: "npm:^6.0.0"
80998099
postcss-logical: "npm:^5.0.0"
8100+
react: "npm:^18.3.1"
8101+
react-dom: "npm:^18.3.1"
81008102
vite: "npm:^5.0.0"
81018103
languageName: unknown
81028104
linkType: soft
@@ -24782,7 +24784,7 @@ __metadata:
2478224784
languageName: node
2478324785
linkType: hard
2478424786

24785-
"react-dom@npm:^18.0.0, react-dom@npm:^18.1.0, react-dom@npm:^18.2.0":
24787+
"react-dom@npm:^18.0.0, react-dom@npm:^18.1.0, react-dom@npm:^18.2.0, react-dom@npm:^18.3.1":
2478624788
version: 18.3.1
2478724789
resolution: "react-dom@npm:18.3.1"
2478824790
dependencies:
@@ -24938,7 +24940,7 @@ __metadata:
2493824940
languageName: node
2493924941
linkType: hard
2494024942

24941-
"react@npm:^18.0.0, react@npm:^18.1.0, react@npm:^18.2.0":
24943+
"react@npm:^18.0.0, react@npm:^18.1.0, react@npm:^18.2.0, react@npm:^18.3.1":
2494224944
version: 18.3.1
2494324945
resolution: "react@npm:18.3.1"
2494424946
dependencies:

0 commit comments

Comments
 (0)