Inline dashboard example

examples/transloadit/index.html

@@ -45,9 +45,7 @@
         <p>
           <label>
             attachments:
-            <span class="dashboard">
-              <input type="file" name="files" multiple>
-            </span>
+            <input type="file" name="files" multiple>
           </label>
           <div class="progress"></div>
 
@@ -59,6 +57,34 @@
           <span class="error"></span>
       </form>
 
+      <hr>
+      <h2>transloadit.form() with dashboard</h2>
+      <form id="dashboard-form" method="post" action="http://localhost:9967/test">
+        <p><strong>leave a message</strong>
+        <p>
+          <label>name:
+            <input type="text" name="name">
+          </label>
+        <p>
+          <label>message: <br>
+            <textarea name="message"></textarea>
+          </label>
+
+        <p>
+          <label>
+            attachments:
+            <span class="dashboard"></span>
+          </label>
+
+        <p>
+          <button type="submit">
+            Upload
+          </button>
+
+          <span class="error"></span>
+      </form>
+
+
       <hr>
       <h2>transloadit.pick()</h2>
 

examples/transloadit/main.js

@@ -31,6 +31,22 @@ formUppy.on('upload-error', (file, err) => {
 
 window.formUppy = formUppy
 
+const formUppyWithDashboard = transloadit.form('#dashboard-form', {
+  debug: true,
+  fields: ['message'],
+  restrictions: {
+    allowedFileTypes: ['.png']
+  },
+  waitForEncoding: true,
+  params: {
+    auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
+    template_id: 'be001500a56011e889f9cddd88df842c'
+  },
+  dashboard: '#dashboard-form .dashboard'
+})
+
+window.formUppyWithDashboard = formUppyWithDashboard
+
 /**
  * transloadit.modal
  */