diff --git a/.eslintrc.js b/.eslintrc.js index 916604aa0f..4a174e3c5f 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -195,6 +195,7 @@ module.exports = { 'examples/aws-presigned-url/*.js', 'examples/bundled/*.js', 'examples/custom-provider/client/*.js', + 'examples/transloadit/*.js', 'private/dev/*.js', 'private/release/*.js', 'private/remark-lint-uppy/*.js', diff --git a/examples/transloadit/README.md b/examples/transloadit/README.md new file mode 100644 index 0000000000..3a59487429 --- /dev/null +++ b/examples/transloadit/README.md @@ -0,0 +1,21 @@ +# Transloadit example + +This example shows how to make advantage of Uppy API to upload files to +[Transloadit](https://transloadit.com/). + +## Run it + +To run this example, make sure you've correctly installed the **repository root**: + +```sh +corepack yarn +corepack yarn build +``` + +That will also install the dependencies for this example. + +Then, again in the **repository root**, start this example by doing: + +```sh +corepack yarn workflow @uppy-example/transloadit start +``` diff --git a/examples/transloadit/index.html b/examples/transloadit/index.html new file mode 100644 index 0000000000..acd41ed5da --- /dev/null +++ b/examples/transloadit/index.html @@ -0,0 +1,128 @@ + + + + + + Transloadit playground + + + +
+

Robodog playground

+

+ This page contains small examples for every API offered by the Robodog library. Please see the Github repository for the source code. + +

+

robodog.form()

+ +

+ 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. + +

+

leave a message +

+ +

+ + +

+ +

+ +

+ + + +

+ +
+

robodog.form() with dashboard

+ +

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

+

leave a message +

+ +

+ + +

+ + +

+ + + +

+ +
+

robodog.dashboard()

+ +

+ The robodog.dashboard 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! + +

+ +

+

robodog.pick()

+ +

+ This API is a one-shot upload UI using a modal overlay. Call the function and receive a Promise with upload results ✌️ + +

+ + +

+

robodog.upload()

+

+ An <input type=file> backed by robodog.upload: + +

+ + +

+

+

+ + + + diff --git a/examples/transloadit/main.js b/examples/transloadit/main.js new file mode 100644 index 0000000000..f764004619 --- /dev/null +++ b/examples/transloadit/main.js @@ -0,0 +1,127 @@ +import robodog from 'uppy' +import 'uppy/dist/uppy.min.css' + +const TRANSLOADIT_KEY = '35c1aed03f5011e982b6afe82599b6a0' +// A trivial template that resizes images, just for example purposes. +// +// "steps": { +// ":original": { "robot": "/upload/handle" }, +// "resize": { +// "use": ":original", +// "robot": "/image/resize", +// "width": 100, +// "height": 100, +// "imagemagick_stack": "v1.0.0" +// } +// } +const TEMPLATE_ID = 'bbc273f69e0c4694a5a9d1b587abc1bc' + +/** + * robodog.form + */ + +const formUppy = robodog.form('#test-form', { + debug: true, + fields: ['message'], + restrictions: { + allowedFileTypes: ['.png'], + }, + waitForEncoding: true, + params: { + auth: { key: TRANSLOADIT_KEY }, + template_id: TEMPLATE_ID, + }, + modal: true, + progressBar: '#test-form .progress', +}) + +formUppy.on('error', (err) => { + document.querySelector('#test-form .error') + .textContent = err.message +}) + +formUppy.on('upload-error', (file, err) => { + document.querySelector('#test-form .error') + .textContent = err.message +}) + +window.formUppy = formUppy + +const formUppyWithDashboard = robodog.form('#dashboard-form', { + debug: true, + fields: ['message'], + restrictions: { + allowedFileTypes: ['.png'], + }, + waitForEncoding: true, + note: 'Only PNG files please!', + params: { + auth: { key: TRANSLOADIT_KEY }, + template_id: TEMPLATE_ID, + }, + dashboard: '#dashboard-form .dashboard', +}) + +window.formUppyWithDashboard = formUppyWithDashboard + +const dashboard = robodog.dashboard('#dashboard', { + debug: true, + waitForEncoding: true, + note: 'Images will be resized with Transloadit', + params: { + auth: { key: TRANSLOADIT_KEY }, + template_id: TEMPLATE_ID, + }, +}) + +window.dashboard = dashboard + +/** + * robodog.modal + */ + +function openModal () { + robodog.pick({ + restrictions: { + allowedFileTypes: ['.png'], + }, + waitForEncoding: true, + params: { + auth: { key: TRANSLOADIT_KEY }, + template_id: TEMPLATE_ID, + }, + providers: [ + 'webcam', + ], + // if providers need custom config + // webcam: { + // option: 'whatever' + // } + }).then(console.log, console.error) +} + +window.openModal = openModal + +/** + * robodog.upload + */ + +window.doUpload = (event) => { + const resultEl = document.querySelector('#upload-result') + const errorEl = document.querySelector('#upload-error') + robodog.upload(event.target.files, { + waitForEncoding: true, + params: { + auth: { key: TRANSLOADIT_KEY }, + template_id: TEMPLATE_ID, + }, + }).then((result) => { + resultEl.classList.remove('hidden') + errorEl.classList.add('hidden') + resultEl.textContent = JSON.stringify(result.results) + }, (err) => { + resultEl.classList.add('hidden') + errorEl.classList.remove('hidden') + errorEl.textContent = err.message + }) +} diff --git a/examples/transloadit/package.json b/examples/transloadit/package.json new file mode 100644 index 0000000000..57e7ddbb0c --- /dev/null +++ b/examples/transloadit/package.json @@ -0,0 +1,14 @@ +{ + "name": "@uppy-example/transloadit", + "version": "0.0.0", + "type": "module", + "dependencies": { + "budo": "^11.3.2", + "he": "^1.2.0", + "uppy": "workspace:*" + }, + "private": true, + "scripts": { + "start": "node server.cjs" + } +} diff --git a/examples/transloadit/server.cjs b/examples/transloadit/server.cjs new file mode 100755 index 0000000000..ac3a5aabc0 --- /dev/null +++ b/examples/transloadit/server.cjs @@ -0,0 +1,127 @@ +#!/usr/bin/env node + +/* eslint-disable compat/compat */ +const http = require('node:http') +const qs = require('node:querystring') +const e = require('he').encode + +/** + * A very haxxor server that outputs some of the data it receives in a POST form parameter. + */ + +const server = http.createServer(onrequest) +server.listen(9967) + +function onrequest (req, res) { + if (req.url !== '/test') { + res.writeHead(404, { 'content-type': 'text/html' }) + res.end('404') + return + } + + function onbody (body) { + const fields = qs.parse(body) + const assemblies = JSON.parse(fields.transloadit) + + res.setHeader('content-type', 'text/html') + res.write(Header()) + res.write(FormFields(fields)) + assemblies.forEach((assembly) => { + res.write(AssemblyResult(assembly)) + }) + res.end(Footer()) + } + + { + let body = '' + req.on('data', (chunk) => { body += chunk }) + req.on('end', () => { + onbody(body) + }) + } +} + +function Header () { + return ` + + + + + + +
+ ` +} + +function Footer () { + return ` +
+ + + ` +} + +function FormFields (fields) { + return ` +

Form Fields

+
+ ${Object.entries(fields).map(Field).join('\n')} +
+ ` + + function Field ([name, value]) { + if (name === 'transloadit') return '' + return ` +
${e(name)}
+
${e(value)}
+ ` + } +} + +function AssemblyResult (assembly) { + return ` +

${e(assembly.assembly_id)} (${e(assembly.ok)})

+ ${UploadsList(assembly.uploads)} + ${ResultsList(assembly.results)} + ` +} + +function UploadsList (uploads) { + return ` + + ` + + function Upload (upload) { + return `
  • ${e(upload.name)}
    • ` + } +} + +function ResultsList (results) { + return Object.keys(results) + .map(ResultsSection) + .join('\n') + + function ResultsSection (stepName) { + return ` +

    ${e(stepName)}

    + + ` + } + + function Result (result) { + return `
  • ${e(result.name)} View
    • ` + } +} diff --git a/yarn.lock b/yarn.lock index 978fe4af6c..3b64873993 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9974,6 +9974,16 @@ __metadata: languageName: unknown linkType: soft +"@uppy-example/transloadit@workspace:examples/transloadit": + version: 0.0.0-use.local + resolution: "@uppy-example/transloadit@workspace:examples/transloadit" + dependencies: + budo: ^11.3.2 + he: ^1.2.0 + uppy: "workspace:*" + languageName: unknown + linkType: soft + "@uppy-example/uppy-with-companion@workspace:examples/uppy-with-companion": version: 0.0.0-use.local resolution: "@uppy-example/uppy-with-companion@workspace:examples/uppy-with-companion"