update bundled-example

examples/bundled-example/index.html

@@ -12,22 +12,21 @@
         text-align: center;
       }
 
-      .MyForm {
+      #upload-form {
         max-width: 400px;
         margin: auto;
-        text-align: initial;
+        text-align: left;
       }
     </style>
     <main>
       <h1>Uppy is here</h1>
 
       <form id="upload-form" action="/">
-        <button type="button" id="pick-files">Pick Files</button>
-        <br><br>
+        <button type="button" id="pick-files">Pick Files</button><br>
         True ? <input type="checkbox" name="check_test" value="1" checked><br>
-        Something: <input type="text" name="yo" value="1">
-        <input type="hidden" name="bla" value="12333">
-        <button type="submit">Read to Submit</button>
+        Something: <input type="text" name="yo" value="1"><br>
+        <input type="hidden" name="bla" value="12333"><br>
+        <button type="submit">Submit</button>
       </form>
     </main>
 

examples/bundled-example/main.js

@@ -1,14 +1,15 @@
 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 Instagram = require('../../src/plugins/Instagram')
+const GoogleDrive = require('../../src/plugins/GoogleDrive')
 const Webcam = require('../../src/plugins/Webcam')
 const Tus = require('../../src/plugins/Tus')
 const Form = require('../../src/plugins/Form')
+
+// const Dropbox = require('../../src/plugins/Dropbox')
 // const XHRUpload = require('../../src/plugins/XHRUpload')
 // const FileInput = require('../../src/plugins/FileInput')
-const MetaData = require('../../src/plugins/MetaData')
+// const MetaData = require('../../src/plugins/MetaData')
 // const Informer = require('../../src/plugins/Informer')
 // const StatusBar = require('../../src/plugins/StatusBar')
 // const DragDrop = require('../../src/plugins/DragDrop')
@@ -21,7 +22,8 @@ const uppy = Uppy({
   debug: true,
   autoProceed: false,
   meta: {
-    username: 'John'
+    username: 'John',
+    license: 'Creative Commons'
   }
   // restrictions: {
   //   maxFileSize: 300000,
@@ -43,37 +45,38 @@ const uppy = Uppy({
   // }
 })
   .use(Dashboard, {
-    trigger: '#uppyModalOpener',
-    // maxWidth: 350,
-    // maxHeight: 400,
-    inline: false,
-    getMetaFromForm: true,
-    // replaceTargetContent: true,
-    // target: '.MyForm',
-    closeModalOnClickOutside: false,
-    locale: {
-      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(Webcam, {target: Dashboard})
-  .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' }
+    trigger: '#pick-files',
+    metaFields: [
+      { id: 'license', name: 'License', placeholder: 'specify license' },
+      { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
     ]
+    // target: '.uppy-target',
+    // inline: true,
+    // maxWidth: 500,
+    // maxHeight: 350,
+    // replaceTargetContent: true,
+    // closeModalOnClickOutside: false,
+    // note: 'Images and video only, 300kb or less',
+    // locale: {
+    //   strings: { browse: 'browse' }
+    // }
   })
-  .use(Form, { target: '#upload-form', submitFormAfterSuccess: false, triggerUploadOnSubmit: true })
+  .use(GoogleDrive, { target: Dashboard, host: 'http://localhost:3020' })
+  .use(Instagram, { target: Dashboard, host: 'http://localhost:3020' })
+  .use(Webcam, { target: Dashboard })
+  .use(Tus, { endpoint: TUS_ENDPOINT })
+  .use(Form, { target: '#upload-form' })
   // .use(GoldenRetriever, {serviceWorker: true})
   .run()
 
-uppy.on('core:success', (fileList) => {
-  console.log('UPLOAD SUCCESSFUL!!!')
-  console.log(fileList)
+uppy.on('complete', (result) => {
+  if (result.failed.length === 0) {
+    console.log('Upload successful 😀')
+  } else {
+    console.warn('Upload failed 😞')
+  }
+  console.log('successful files:', result.successful)
+  console.log('failed files:', result.failed)
 })
 
 if ('serviceWorker' in navigator) {
@@ -87,7 +90,5 @@ if ('serviceWorker' in navigator) {
     })
 }
 
-// uppy.emit('informer', 'Smile!', 'info', 2000)
-
 // var modalTrigger = document.querySelector('#uppyModalOpener')
 // if (modalTrigger) modalTrigger.click()