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: +
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 [``](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 + + + + +``` + +The progress bar will be inserted _into_ that element (thus _not_ replace it). ## Dashboard