add Form to the example, alter <form> in index.html

This commit is contained in:
Artur Paikin 2017-11-03 01:48:49 -04:00
parent 81611fa343
commit f2fc9aeec3
2 changed files with 19 additions and 23 deletions

View file

@ -20,17 +20,14 @@
</style>
<main>
<h1>Uppy is here</h1>
<button id="uppyModalOpener">Choose Files</button>
<div class="Uppy">
<form class="MyForm" action="/">
<input type="file" />
<input type="hidden" name="bla" value="12333">
<input type="text" name="yo" value="1">
<button type="submit">Upload</button>
<input type="submit">
</form>
</div>
<form id="upload-form" action="/">
<button type="button" id="uppyModalOpener">Select Files</button>
<br><br>
<input type="hidden" name="bla" value="12333">
<input type="text" name="yo" value="1">
<button type="submit">Submit</button>
</form>
</main>
<link href="uppy.min.css" rel="stylesheet">

View file

@ -1,10 +1,11 @@
const Uppy = require('../../src/core')
const Dashboard = require('../../src/plugins/Dashboard')
// const GoogleDrive = require('../../src/plugins/GoogleDrive')
const Dropbox = require('../../src/plugins/Dropbox')
const Instagram = require('../../src/plugins/Instagram')
// const Dropbox = require('../../src/plugins/Dropbox')
// const Instagram = require('../../src/plugins/Instagram')
const Webcam = require('../../src/plugins/Webcam')
const Tus = require('../../src/plugins/Tus')
const Form = require('../../src/plugins/Form')
// const XHRUpload = require('../../src/plugins/XHRUpload')
// const FileInput = require('../../src/plugins/FileInput')
const MetaData = require('../../src/plugins/MetaData')
@ -46,29 +47,27 @@ const uppy = Uppy({
// maxWidth: 350,
// maxHeight: 400,
inline: false,
disableStatusBar: false,
disableInformer: false,
getMetaFromForm: true,
replaceTargetContent: true,
target: '.MyForm',
hideUploadButton: false,
// replaceTargetContent: true,
// target: '.MyForm',
closeModalOnClickOutside: false,
locale: {
strings: {browse: 'browse'}
strings: { browse: 'browse' }
}
// note: 'Images and video only, 300kb or less'
})
// .use(GoogleDrive, {target: Dashboard, host: 'http://localhost:3020'})
.use(Dropbox, {target: Dashboard, host: 'http://localhost:3020'})
.use(Instagram, {target: Dashboard, host: 'http://localhost:3020'})
// .use(Dropbox, {target: Dashboard, host: 'http://localhost:3020'})
// .use(Instagram, {target: Dashboard, host: 'http://localhost:3020'})
.use(Webcam, {target: Dashboard})
.use(Tus, {endpoint: TUS_ENDPOINT, resume: true})
.use(Tus, {endpoint: TUS_ENDPOINT})
.use(MetaData, {
fields: [
{ id: 'license', name: 'License', value: 'Creative Commons', placeholder: 'specify license' },
{ id: 'caption', name: 'Caption', value: 'none', placeholder: 'describe what the image is about' }
]
})
.use(Form, { target: '#upload-form', submitFormAfterSuccess: false })
// .use(GoldenRetriever, {serviceWorker: true})
.run()
@ -90,5 +89,5 @@ if ('serviceWorker' in navigator) {
// uppy.emit('informer', 'Smile!', 'info', 2000)
var modalTrigger = document.querySelector('#uppyModalOpener')
if (modalTrigger) modalTrigger.click()
// var modalTrigger = document.querySelector('#uppyModalOpener')
// if (modalTrigger) modalTrigger.click()