Skip to content

Instantly share code, notes, and snippets.

@dbtek
Created November 2, 2020 16:16
Show Gist options
  • Save dbtek/86bc71113dbb22d0dd8cb065a8f5a86a to your computer and use it in GitHub Desktop.
Save dbtek/86bc71113dbb22d0dd8cb065a8f5a86a to your computer and use it in GitHub Desktop.
Uppy dashboard with custom form (w/ select) auto edit mode
const uppy = new Uppy.Core({
meta: {
foo: 'bar'
}
})
.use(Uppy.Dashboard, {
target: '#dashboard',
replaceTargetContent: true,
inline: true,
metaFields: [{
id: 'foo',
name: 'Foo',
render: ({ value, onChange }, h) => {
return h(
'select',
{ value, onChange: e => onChange(e.target.value) },
[
h('option', { value: 'bar', selected: 'bar' === value }, 'Bar'),
h('option', { value: 'baz', selected: 'baz' === value }, 'Baz'),
]
);
}
}]
})
.use(Uppy.XHRUpload, { endpoint: 'https://api2.transloadit.com' })
// one caveat is that when multiple files are picked edit mode is only toggled for last item
// Uppy doesnt support limiting only file picker to single file selection
// if maxNumberOfFiles is set to 1 both file picker and dashboard is forced to upload 1 file
uppy.on('file-added', (file) => {
uppy.getPlugin('Dashboard').setPluginState({
fileCardFor: file.id || null,
activeOverlayType: file.id ? 'FileCard' : null
});
});
@dbtek
Copy link
Author

dbtek commented Nov 2, 2020

Please see it in action on codepen.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment