From b24395f08875aae4306b47bfb44661d40b4db11e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9e=20Kooi?= <renee@kooi.me>
Date: Mon, 3 Dec 2018 15:31:50 +0100
Subject: [PATCH] transloadit-preset: Document `progressBar`

---
 examples/transloadit/index.html             |  1 +
 examples/transloadit/main.js                |  3 ++-
 website/src/docs/transloadit-preset-form.md | 20 +++++++++++++++++++-
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/examples/transloadit/index.html b/examples/transloadit/index.html
index f16f5c177..a47b2605d 100644
--- a/examples/transloadit/index.html
+++ b/examples/transloadit/index.html
@@ -47,6 +47,7 @@
             attachments:
             <input type="file">
           </label>
+          <div class="progress"></div>
 
         <p>
           <button type="submit">
diff --git a/examples/transloadit/main.js b/examples/transloadit/main.js
index 9a1dd9dfc..b2356dbf7 100644
--- a/examples/transloadit/main.js
+++ b/examples/transloadit/main.js
@@ -13,7 +13,8 @@ const formUppy = transloadit.form('#test-form', {
   params: {
     auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
     template_id: 'be001500a56011e889f9cddd88df842c'
-  }
+  },
+  progressBar: '#test-form .progress'
 })
 
 formUppy.on('error', (err) => {
diff --git a/website/src/docs/transloadit-preset-form.md b/website/src/docs/transloadit-preset-form.md
index 5068bcae4..4a6a9537f 100644
--- a/website/src/docs/transloadit-preset-form.md
+++ b/website/src/docs/transloadit-preset-form.md
@@ -62,7 +62,25 @@ If provided, the [`<input accept>`](https://developer.mozilla.org/en-US/docs/Web
 
 ## Progress Reporting
 
-**TODO have an option to mount a status bar somewhere**
+**TODO also have an onProgress() callback or something for custom progress**
+
+Uploads using HTML forms have no builtin progress reporting. With the Transloadit Preset, you can use the `progressBar` option to show an [@uppy/status-bar](/docs/status-bar): an element styled like a progress bar, reporting both upload and Assembly execution progress.
+
+Point it to an element or a CSS selector:
+
+```html
+<form id="my-form" ...>
+  <div class="progress"></div>
+</form>
+<script>
+transloadit.form('form#my-form', {
+  progressBar: '#my-form .progress'
+  // ...
+})
+</script>
+```
+
+The progress bar will be inserted _into_ that element (thus _not_ replace it).
 
 ## Dashboard