mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-17 16:50:22 +00:00
5519b84409
- This PR upgrades `biome` from `2.0.5` -> `2.1.2` and adds two new rules - [noUnusedImports](https://biomejs.dev/linter/rules/no-unused-private-class-members) ( we already had suppressions for this rule in code, but the rule itself was never enabled in the config ) - [noUnusedPrivateClassMembers](https://biomejs.dev/linter/rules/no-unused-private-class-members/) - remove stale suppressions. - remove stale code. --------- Co-authored-by: Mikael Finstad <finstaden@gmail.com>
169 lines
4.4 KiB
HTML
169 lines
4.4 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Transloadit Example</title>
|
||
</head>
|
||
<body>
|
||
<style>
|
||
html {
|
||
background: #f1f1f1;
|
||
}
|
||
main {
|
||
padding: 20px;
|
||
font: 12pt sans-serif;
|
||
background: white;
|
||
width: 800px;
|
||
margin: auto;
|
||
}
|
||
hr {
|
||
border: 0;
|
||
background-color: #111e33;
|
||
height: 1px;
|
||
}
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
.error {
|
||
color: red;
|
||
}
|
||
#logo {
|
||
height: 1em;
|
||
vertical-align: middle;
|
||
}
|
||
</style>
|
||
<main>
|
||
<h1>
|
||
Uppy Transloadit
|
||
<img
|
||
src="https://my-app.tlcdn.com/resize-img/canoe.jpg?w=300&h=300"
|
||
alt="Transloadit"
|
||
id="logo"
|
||
/>
|
||
playground
|
||
</h1>
|
||
<p>
|
||
This page contains small examples for different ways you can use Uppy
|
||
with Transloadit. Please see the
|
||
<a
|
||
href="https://github.com/transloadit/uppy/tree/main/examples/transloadit"
|
||
>Github repository</a
|
||
>
|
||
for the source code.
|
||
</p>
|
||
<hr />
|
||
<h2>Form</h2>
|
||
|
||
<p>
|
||
The form API allows you to easily send files through Transloadit’s
|
||
encoding backend. When the user submits the form, any files are uploaded
|
||
to Transloadit. The form data is then sent to your own backend, with
|
||
additional data about the Transloadit Assemblies that were started.
|
||
</p>
|
||
<form id="test-form" method="post" action="http://localhost:9967/test">
|
||
<p><strong>leave a message</strong></p>
|
||
<p>
|
||
<label
|
||
>name:
|
||
<input type="text" name="name" />
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label
|
||
>message: <br />
|
||
<textarea name="message"></textarea>
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label>
|
||
attachments:
|
||
<!-- <input type="file" name="files" multiple> -->
|
||
<strong id="uppy-form-selected-files"></strong>
|
||
<button type="button" id="uppy-select-files">Select Files</button>
|
||
</label>
|
||
<span class="progress"></span>
|
||
</p>
|
||
<p>
|
||
<button type="submit">Upload</button>
|
||
</p>
|
||
<span class="error"></span>
|
||
</form>
|
||
|
||
<hr />
|
||
<h2>Form with inline Dashboard</h2>
|
||
|
||
<p>You can also use the Dashboard UI inside a plain old HTML form.</p>
|
||
<form
|
||
id="dashboard-form"
|
||
method="post"
|
||
action="http://localhost:9967/test"
|
||
>
|
||
<p><strong>leave a message</strong></p>
|
||
<p>
|
||
<label
|
||
>name:
|
||
<input type="text" name="name" />
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label
|
||
>message: <br />
|
||
<textarea name="message"></textarea>
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<label>
|
||
attachments:
|
||
<span class="dashboard"></span>
|
||
</label>
|
||
</p>
|
||
<p>
|
||
<button type="submit">Upload</button>
|
||
</p>
|
||
<span class="error"></span>
|
||
</form>
|
||
|
||
<hr />
|
||
<h2>Inline Dashboard</h2>
|
||
<p>
|
||
The <code>robodog.dashboard</code> API allows you to embed a Dashboard
|
||
at any location. Users can continuously upload files through this UI, so
|
||
please make sure this fits your use case!
|
||
</p>
|
||
<div id="dashboard"></div>
|
||
|
||
<hr />
|
||
<h2>Dashboard Modal</h2>
|
||
|
||
<p>
|
||
This API is a one-shot upload UI using a modal overlay. Call the
|
||
function and receive a listen to an event with upload results ✌️
|
||
</p>
|
||
<button type="button" onclick="openModal()">Open</button>
|
||
|
||
<h2>uppy.upload()</h2>
|
||
<p>An <input type=file> backed by <code>uppy.upload()</code>:</p>
|
||
<p>
|
||
<input type="file" multiple onchange="doUpload(event)" />
|
||
</p>
|
||
<div id="upload-progress"></div>
|
||
<div id="upload-result-image"></div>
|
||
<code>
|
||
<pre
|
||
id="upload-result"
|
||
style="
|
||
font-size: 12px;
|
||
max-width: 100%;
|
||
max-height: 300px;
|
||
white-space: pre-wrap;
|
||
overflow: auto;
|
||
"
|
||
></pre>
|
||
<pre id="upload-error" class="error"></pre>
|
||
</code>
|
||
</main>
|
||
|
||
<script src="./main.js" type="module"></script>
|
||
</body>
|
||
</html>
|