Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

example: replace Robodog example with Transloadit + RemoteSources + Form #4027

Merged
merged 2 commits into from Aug 22, 2022
Merged

example: replace Robodog example with Transloadit + RemoteSources + Form #4027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c55093e
example: remove Robodog example
aduh95 Aug 22, 2022
6af423a
Update examples/transloadit/index.html
arturi Aug 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 3 additions & 6 deletions examples/transloadit/README.md
View file
Open in desktop
@@ -1,10 +1,7 @@
# Robodog
# Transloadit example

This example shows all the different Robodog APIs in action on a single page.
Robodog has been deprecated, so this example shows how to replicate Robodog
features without using it. If you are new with Uppy, this example is probably
not for you, as it is specifically aimed for Robodog users looking to migrate
out of it.
This example shows how to make advantage of Uppy API to upload files to
[Transloadit](https://transloadit.com/).

## Run it

Expand Down
78 changes: 41 additions & 37 deletions examples/transloadit/index.html
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Robodog playground</title>
<title>Transloadit Example</title>
</head>
<body>
<style>
Expand All @@ -27,103 +27,107 @@
#logo { height: 1em; vertical-align: middle; }
</style>
<main>
<h1>Robodog <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1>
<h1>Uppy Transloadit <img src="https://transloadit.edgly.net/assets/images/logo-small.svg" alt="Transloadit" id="logo"> playground</h1>
<p>
This page contains small examples for every API offered by the Robodog library. Please see the <a href="https://github.com/transloadit/uppy/tree/main/examples/transloadit">Github repository</a> for the source code.

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>robodog.form()</h2>
<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.

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><strong>leave a message</strong></p>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<p> is really not the correct tag here, we should probably rewrite that.

<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>
<!-- <input type="file" name="files" multiple> -->
<strong id="uppy-form-selected-files"></strong>
<button type="button" id="uppy-select-files">Select Files</button>
</label>
<div class="progress"></div>

</p>
<p>
<button type="submit">
Upload
</button>

</p>
<span class="error"></span>
</form>

<hr>
<h2>robodog.form() with dashboard</h2>
<h2>Form with inline Dashboard</h2>

<p>
You can also use the Dashboard UI inside a plain old HTML form by specifying a <code>dashboard: '.target-css-selector'</code> option.

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><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>robodog.dashboard()</h2>

<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 id="dashboard">
</p>
<div id="dashboard"></div>

<hr>
<h2>robodog.pick()</h2>

<p>
This API is a one-shot upload UI using a modal overlay. Call the function and receive a Promise with upload results ✌️
<h2>Dashboard Modal</h2>

<p>
<button onclick="openModal()">Open</button>
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 onclick="openModal()">Open</button>

<hr>
<h2>robodog.upload()</h2>
<h2>uppy.upload()</h2>
<p>
An &lt;input type=file&gt; backed by <code>robodog.upload</code>:

An &lt;input type=file&gt; backed by <code>uppy.upload()</code>:
</p>
<p>
<input type="file" multiple onchange="doUpload(event)">

<p id="upload-result">
<p id="upload-error" class="error">
</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>

<link href="uppy.min.css" rel="stylesheet">
<script src="bundle.js"></script>
<script src="./main.js" type="module"></script>
</body>
</html>
38 changes: 13 additions & 25 deletions examples/transloadit/main.js
View file
Open in desktop
Expand Up @@ -31,15 +31,6 @@ const TEMPLATE_ID = 'bbc273f69e0c4694a5a9d1b587abc1bc'
* Form
*/

// Robodog supported automatically replacing <input type="file"> elements
// Now we do it manually:
const button = document.createElement('button')
button.type = 'button'
button.innerText = 'Select files'
button.id = 'select-files'
const fileInput = document.querySelector('#test-form input[type=file]')
fileInput.replaceWith(button)

const formUppy = new Uppy({
debug: true,
autoProceed: true,
Expand All @@ -48,14 +39,15 @@ const formUppy = new Uppy({
},
})
.use(Dashboard, {
trigger: '#select-files',
trigger: '#uppy-select-files',
closeAfterFinish: true,
note: 'Only PNG files please!',
})
.use(RemoteSources, { companionUrl: COMPANION_URL })
.use(Form, {
target: '#test-form',
fields: ['message'],
// submitOnSuccess: true,
addResultToForm: true,
})
.use(Transloadit, {
Expand All @@ -77,12 +69,10 @@ formUppy.on('upload-error', (file, err) => {
})

formUppy.on('complete', ({ transloadit }) => {
const btn = document.getElementById('select-files')
const form = document.getElementById('test-form')
const btn = document.getElementById('uppy-select-files')
btn.hidden = true
const selectedFiles = document.createElement('uppy-form-selected-files')
const selectedFiles = document.getElementById('uppy-form-selected-files')
selectedFiles.textContent = `selected files: ${Object.keys(transloadit[0].results).length}`
form.appendChild(selectedFiles)
})

window.formUppy = formUppy
Expand Down Expand Up @@ -172,11 +162,9 @@ const dashboardModal = new Uppy({
})

dashboardModal.on('complete', ({ transloadit, successful, failed }) => {
if (failed?.length !== 0) {
console.error('it failed', failed)
} else {
console.log('success', { transloadit, successful })
}
console.log(transloadit)
console.log(successful)
console.error(failed)
})

function openModal () {
Expand All @@ -202,7 +190,7 @@ const uppyWithoutUI = new Uppy({
template_id: TEMPLATE_ID,
},
})
.use(ProgressBar, { target: '#upload-result' })
.use(ProgressBar, { target: '#upload-progress' })

window.doUpload = (event) => {
const resultEl = document.querySelector('#upload-result')
Expand All @@ -212,14 +200,14 @@ window.doUpload = (event) => {
uppyWithoutUI.upload()

uppyWithoutUI.on('complete', ({ transloadit }) => {
const resizedUrl = transloadit[0].results['resize'][0]['ssl_url']
const img = document.createElement('img')
img.src = resizedUrl
document.getElementById('upload-result').appendChild(img)

resultEl.classList.remove('hidden')
errorEl.classList.add('hidden')
resultEl.textContent = JSON.stringify(transloadit[0].results, null, 2)

const resizedUrl = transloadit[0].results['resize'][0]['ssl_url']
const img = document.createElement('img')
img.src = resizedUrl
document.getElementById('upload-result-image').appendChild(img)
})

uppyWithoutUI.on('error', (err) => {
Expand Down
17 changes: 6 additions & 11 deletions examples/transloadit/package.json
View file
Open in desktop
@@ -1,6 +1,11 @@
{
"name": "@uppy-example/transloadit",
"version": "0.0.0",
"type": "module",
"devDependencies": {
"npm-run-all": "^4.1.5",
"vite": "^3.0.0"
},
"dependencies": {
"@uppy/core": "workspace:*",
"@uppy/dashboard": "workspace:*",
Expand All @@ -14,20 +19,10 @@
"express": "^4.16.4",
"he": "^1.2.0"
},
"devDependencies": {
"@rollup/plugin-commonjs": "^22.0.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"npm-run-all": "^4.1.5",
"rollup": "^2.60.2",
"rollup-plugin-css-only": "^3.0.0",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-terser": "^7.0.0"
},
"private": true,
"scripts": {
"serve": "sirv .",
"start:server": "node server.cjs",
"start:client": "rollup -c -w",
"start:client": "vite",
"start": "npm-run-all --parallel start:server start:client"
}
}
28 changes: 17 additions & 11 deletions examples/transloadit/server.cjs 100644 → 100755
View file
Open in desktop
@@ -1,7 +1,11 @@
#!/usr/bin/env node

/* eslint-disable compat/compat */
const http = require('node:http')
const qs = require('node:querystring')
const e = require('he').encode
import http from 'node:http'
import qs from 'node:querystring'
import he from 'he'

const e = he.encode

/**
* A very haxxor server that outputs some of the data it receives in a POST form parameter.
Expand All @@ -17,12 +21,6 @@ function onrequest (req, res) {
return
}

let body = ''
req.on('data', (chunk) => { body += chunk })
req.on('end', () => {
onbody(body)
})

function onbody (body) {
const fields = qs.parse(body)
const result = JSON.parse(fields.uppyResult)
Expand All @@ -36,6 +34,14 @@ function onrequest (req, res) {
})
res.end(Footer())
}

{
let body = ''
req.on('data', (chunk) => { body += chunk })
req.on('end', () => {
onbody(body)
})
}
}

function Header () {
Expand Down Expand Up @@ -82,8 +88,8 @@ function FormFields (fields) {
try {
value = JSON.stringify(
JSON.parse(value),
null,
2,
null,
2
)
isValueJSON = true
} catch {
Expand Down
7 changes: 1 addition & 6 deletions yarn.lock
View file
Open in desktop
Expand Up @@ -8285,8 +8285,6 @@ __metadata:
version: 0.0.0-use.local
resolution: "@uppy-example/transloadit@workspace:examples/transloadit"
dependencies:
"@rollup/plugin-commonjs": ^22.0.0
"@rollup/plugin-node-resolve": ^13.0.0
"@uppy/core": "workspace:*"
"@uppy/dashboard": "workspace:*"
"@uppy/drop-target": "workspace:*"
Expand All @@ -8299,10 +8297,7 @@ __metadata:
express: ^4.16.4
he: ^1.2.0
npm-run-all: ^4.1.5
rollup: ^2.60.2
rollup-plugin-css-only: ^3.0.0
rollup-plugin-livereload: ^2.0.0
rollup-plugin-terser: ^7.0.0
vite: ^3.0.0
languageName: unknown
linkType: soft

Expand Down