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

examples/bundled-example/index.html

@@ -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">

examples/bundled-example/main.js

@@ -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()