From b8a894527c614a9c757b2ba1daae568106d7724b Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Thu, 18 Aug 2022 13:02:50 +0200 Subject: [PATCH 01/11] example: fix dependencies of `bundled` example (#4005) --- examples/bundled/package.json | 5 +++-- yarn.lock | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/bundled/package.json b/examples/bundled/package.json index 74e8fbd916b..5c7d1b3c424 100644 --- a/examples/bundled/package.json +++ b/examples/bundled/package.json @@ -2,14 +2,15 @@ "name": "@uppy-example/bundled", "version": "0.0.0", "dependencies": { - "@babel/core": "^7.4.4", "@uppy/core": "workspace:*", "@uppy/dashboard": "workspace:*", "@uppy/google-drive": "workspace:*", "@uppy/instagram": "workspace:*", "@uppy/tus": "workspace:*", "@uppy/url": "workspace:*", - "@uppy/webcam": "workspace:*", + "@uppy/webcam": "workspace:*" + }, + "devDependencies": { "parcel": "^2.0.0" }, "private": true, diff --git a/yarn.lock b/yarn.lock index b888dc531aa..202ea0983c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8333,7 +8333,6 @@ __metadata: version: 0.0.0-use.local resolution: "@uppy-example/bundled@workspace:examples/bundled" dependencies: - "@babel/core": ^7.4.4 "@uppy/core": "workspace:*" "@uppy/dashboard": "workspace:*" "@uppy/google-drive": "workspace:*" From e69d4ecf92b437900115d8052b3ef360e39b19b4 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Thu, 18 Aug 2022 14:55:41 +0200 Subject: [PATCH 02/11] example: update to new CDN export names (#4006) `Uppy` call is now exported as `Uppy` instead of `Core`. Refs: https://github.com/transloadit/uppy/pull/3981 --- examples/cdn-example/index.html | 8 ++++---- examples/uppy-with-companion/client/index.html | 16 +++++++++------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/examples/cdn-example/index.html b/examples/cdn-example/index.html index b355728ca82..445d586a707 100644 --- a/examples/cdn-example/index.html +++ b/examples/cdn-example/index.html @@ -12,13 +12,13 @@ - + + diff --git a/examples/transloadit-textarea/main.js b/examples/transloadit-markdown-bin/main.js similarity index 54% rename from examples/transloadit-textarea/main.js rename to examples/transloadit-markdown-bin/main.js index 4fa11f356cd..168ad86be38 100644 --- a/examples/transloadit-textarea/main.js +++ b/examples/transloadit-markdown-bin/main.js @@ -1,32 +1,33 @@ -/* eslint-env browser */ -const marked = require('marked') -const dragdrop = require('drag-drop') -const robodog = require('@uppy/robodog') +import { marked } from 'marked' +import Uppy from '@uppy/core' +import DropTarget from '@uppy/drop-target' +import Dashboard from '@uppy/dashboard' +import Transloadit from '@uppy/transloadit' +import RemoteSources from '@uppy/remote-sources' +import Webcam from '@uppy/webcam' +import ImageEditor from '@uppy/image-editor' + +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' +import '@uppy/image-editor/dist/style.css' const TRANSLOADIT_EXAMPLE_KEY = '35c1aed03f5011e982b6afe82599b6a0' const TRANSLOADIT_EXAMPLE_TEMPLATE = '0b2ee2bc25dc43619700c2ce0a75164a' /** * A textarea for markdown text, with support for file attachments. - * - * ## Usage - * - * ```js - * const element = document.querySelector('textarea') - * const mdtxt = new MarkdownTextarea(element) - * mdtxt.install() - * ``` */ class MarkdownTextarea { constructor (element) { this.element = element this.controls = document.createElement('div') this.controls.classList.add('mdtxt-controls') - this.uploadLine = document.createElement('div') - this.uploadLine.classList.add('mdtxt-upload') + this.uploadLine = document.createElement('button') + this.uploadLine.setAttribute('type', 'button') + this.uploadLine.classList.add('form-upload') this.uploadLine.appendChild( - document.createTextNode('Upload an attachment'), + document.createTextNode('Tap here to upload an attachment'), ) } @@ -39,18 +40,37 @@ class MarkdownTextarea { wrapper.appendChild(element) wrapper.appendChild(this.uploadLine) - this.setupUploadLine() + this.setupUppy() } - setupTextareaDrop () { - dragdrop(this.element, (files) => { - this.uploadFiles(files) - }) - } - - setupUploadLine () { - this.uploadLine.addEventListener('click', () => { - this.pickFiles() + setupUppy = () => { + this.uppy = new Uppy({ autoProceed: true }) + .use(Transloadit, { + waitForEncoding: true, + params: { + auth: { key: TRANSLOADIT_EXAMPLE_KEY }, + template_id: TRANSLOADIT_EXAMPLE_TEMPLATE, + }, + }) + .use(DropTarget, { target: this.element }) + .use(Dashboard, { closeAfterFinish: true, trigger: '.form-upload' }) + .use(ImageEditor, { target: Dashboard }) + .use(Webcam, { target: Dashboard }) + .use(RemoteSources, { companionUrl: Transloadit.COMPANION }) + + this.uppy.on('complete', (result) => { + const { successful, failed, transloadit } = result + if (successful.length !== 0) { + this.insertAttachments( + matchFilesAndThumbs(transloadit[0].results), + ) + } else { + failed.forEach(error => { + console.error(error) + this.reportUploadError(error) + }) + } + this.uppy.cancelAll() }) } @@ -82,66 +102,20 @@ class MarkdownTextarea { }) } - matchFilesAndThumbs (results) { - const filesById = {} - const thumbsById = {} - - results.forEach((result) => { - if (result.stepName === 'thumbnails') { - thumbsById[result.original_id] = result - } else { - filesById[result.original_id] = result + uploadFiles = (files) => { + const filesForUppy = files.map(file => { + return { + data: file, + type: file.type, + name: file.name, + meta: file.meta || {}, } }) - - return Object.keys(filesById).map((key) => ({ - file : filesById[key], - thumb : thumbsById[key], - })) - } - - uploadFiles () { - robodog.upload({ - waitForEncoding: true, - params: { - auth: { key: TRANSLOADIT_EXAMPLE_KEY }, - template_id: TRANSLOADIT_EXAMPLE_TEMPLATE, - }, - }).then((result) => { - // Was cancelled - if (result == null) return - this.insertAttachments( - this.matchFilesAndThumbs(result.results), - ) - }).catch((err) => { - console.error(err) - this.reportUploadError(err) - }) - } - - pickFiles () { - robodog.pick({ - waitForEncoding: true, - params: { - auth: { key: TRANSLOADIT_EXAMPLE_KEY }, - template_id: TRANSLOADIT_EXAMPLE_TEMPLATE, - }, - }).then((result) => { - // Was cancelled - if (result == null) return - this.insertAttachments( - this.matchFilesAndThumbs(result.results), - ) - }).catch((err) => { - console.error(err) - this.reportUploadError(err) - }) + this.uppy.addFiles(filesForUppy) } } -const textarea = new MarkdownTextarea( - document.querySelector('#new textarea'), -) +const textarea = new MarkdownTextarea(document.querySelector('#new textarea')) textarea.install() function renderSnippet (title, text) { @@ -170,20 +144,40 @@ function loadSnippets () { } } +function matchFilesAndThumbs (results) { + const filesById = {} + const thumbsById = {} + + for (const [stepName, result] of Object.entries(results)) { + result.forEach(result => { + if (stepName === 'thumbnails') { + thumbsById[result.original_id] = result + } else { + filesById[result.original_id] = result + } + }) + } + + return Object.keys(filesById).map((key) => ({ + file: filesById[key], + thumb: thumbsById[key], + })) +} + document.querySelector('#new').addEventListener('submit', (event) => { event.preventDefault() - const title = event.target.querySelector('input[name="title"]').value + const title = event.target.elements['title'].value || 'Unnamed Snippet' const text = textarea.element.value saveSnippet(title, text) renderSnippet(title, text) + // eslint-disable-next-line no-param-reassign event.target.querySelector('input').value = '' + // eslint-disable-next-line no-param-reassign event.target.querySelector('textarea').value = '' }) -window.addEventListener('DOMContentLoaded', () => { - loadSnippets() -}) +window.addEventListener('DOMContentLoaded', loadSnippets, { once: true }) diff --git a/examples/transloadit-markdown-bin/package.json b/examples/transloadit-markdown-bin/package.json new file mode 100644 index 00000000000..aaeaa7180ae --- /dev/null +++ b/examples/transloadit-markdown-bin/package.json @@ -0,0 +1,22 @@ +{ + "name": "@uppy-example/transloadit-markdown-bin", + "version": "0.0.0", + "type": "module", + "dependencies": { + "@uppy/core": "workspace:*", + "@uppy/dashboard": "workspace:*", + "@uppy/drop-target": "workspace:*", + "@uppy/image-editor": "workspace:*", + "@uppy/remote-sources": "workspace:*", + "@uppy/transloadit": "workspace:*", + "@uppy/webcam": "workspace:*", + "marked": "^4.0.18" + }, + "devDependencies": { + "vite": "^3.0.0" + }, + "private": true, + "scripts": { + "start": "vite" + } +} diff --git a/examples/transloadit-textarea/package.json b/examples/transloadit-textarea/package.json deleted file mode 100644 index e5ff4ed807c..00000000000 --- a/examples/transloadit-textarea/package.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "@uppy-example/transloadit-textarea", - "version": "0.0.0", - "dependencies": { - "@uppy/robodog": "workspace:*", - "browserify": "^16.5.2", - "drag-drop": "^4.2.0", - "ecstatic": "^4.1.4", - "marked": "^0.7.0" - }, - "private": true, - "scripts": { - "start": "browserify main.js -o bundle.js && ecstatic" - } -} diff --git a/examples/transloadit-textarea/template.json b/examples/transloadit-textarea/template.json deleted file mode 100644 index 86e74e04d52..00000000000 --- a/examples/transloadit-textarea/template.json +++ /dev/null @@ -1,93 +0,0 @@ -{ - "steps": { - ":original": { - "robot": "/upload/handle" - }, - - "images": { - "use": [ - ":original" - ], - "robot": "/file/filter", - "result": true, - "accepts": [ - ["${file.mime}", "regex", "image/"] - ] - }, - "videos": { - "use": [ - ":original" - ], - "robot": "/file/filter", - "result": true, - "accepts": [ - ["${file.mime}", "regex", "video/"] - ] - }, - "audios": { - "use": [ - ":original" - ], - "robot": "/file/filter", - "result": true, - "accepts": [ - ["${file.mime}", "regex", "audio/"] - ] - }, - "others": { - "use": [ - ":original" - ], - "robot": "/file/filter", - "result": true, - "rejects": [ - ["${file.mime}", "regex", "image/"], - ["${file.mime}", "regex", "video/"], - ["${file.mime}", "regex", "audio/"] - ] - }, - - "audio_thumbnails": { - "use": [ - "audios" - ], - "robot": "/audio/artwork", - "ffmpeg_stack": "v3.3.3" - }, - "resized_thumbnails": { - "use": [ - "images", - "audio_thumbnails" - ], - "robot": "/image/resize", - "imagemagick_stack": "v2.0.7", - "width": 400, - "height": 300, - "resize_strategy": "fit", - "zoom": false - }, - "video_thumbnails": { - "use": [ - "videos" - ], - "robot": "/video/thumbs", - "ffmpeg_stack": "v3.3.3", - "count": 1, - "offsets": [ - "50%" - ], - "format": "jpeg", - "width": 400, - "height": 300, - "resize_strategy": "fit" - }, - "thumbnails": { - "use": [ - "resized_thumbnails", - "video_thumbnails" - ], - "robot": "/image/optimize", - "result": true - } - } -} diff --git a/yarn.lock b/yarn.lock index d00466be565..75f27e28a35 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8279,15 +8279,19 @@ __metadata: languageName: unknown linkType: soft -"@uppy-example/transloadit-textarea@workspace:examples/transloadit-textarea": +"@uppy-example/transloadit-markdown-bin@workspace:examples/transloadit-markdown-bin": version: 0.0.0-use.local - resolution: "@uppy-example/transloadit-textarea@workspace:examples/transloadit-textarea" + resolution: "@uppy-example/transloadit-markdown-bin@workspace:examples/transloadit-markdown-bin" dependencies: - "@uppy/robodog": "workspace:*" - browserify: ^16.5.2 - drag-drop: ^4.2.0 - ecstatic: ^4.1.4 - marked: ^0.7.0 + "@uppy/core": "workspace:*" + "@uppy/dashboard": "workspace:*" + "@uppy/drop-target": "workspace:*" + "@uppy/image-editor": "workspace:*" + "@uppy/remote-sources": "workspace:*" + "@uppy/transloadit": "workspace:*" + "@uppy/webcam": "workspace:*" + marked: ^4.0.18 + vite: ^3.0.0 languageName: unknown linkType: soft @@ -8578,7 +8582,7 @@ __metadata: languageName: unknown linkType: soft -"@uppy/drop-target@workspace:^, @uppy/drop-target@workspace:packages/@uppy/drop-target": +"@uppy/drop-target@workspace:*, @uppy/drop-target@workspace:^, @uppy/drop-target@workspace:packages/@uppy/drop-target": version: 0.0.0-use.local resolution: "@uppy/drop-target@workspace:packages/@uppy/drop-target" dependencies: @@ -8661,7 +8665,7 @@ __metadata: languageName: unknown linkType: soft -"@uppy/image-editor@workspace:^, @uppy/image-editor@workspace:packages/@uppy/image-editor": +"@uppy/image-editor@workspace:*, @uppy/image-editor@workspace:^, @uppy/image-editor@workspace:packages/@uppy/image-editor": version: 0.0.0-use.local resolution: "@uppy/image-editor@workspace:packages/@uppy/image-editor" dependencies: @@ -8783,7 +8787,7 @@ __metadata: languageName: unknown linkType: soft -"@uppy/remote-sources@workspace:^, @uppy/remote-sources@workspace:packages/@uppy/remote-sources": +"@uppy/remote-sources@workspace:*, @uppy/remote-sources@workspace:^, @uppy/remote-sources@workspace:packages/@uppy/remote-sources": version: 0.0.0-use.local resolution: "@uppy/remote-sources@workspace:packages/@uppy/remote-sources" dependencies: @@ -11872,7 +11876,7 @@ __metadata: languageName: node linkType: hard -"browserify@npm:^16.2.3, browserify@npm:^16.5.2": +"browserify@npm:^16.2.3": version: 16.5.2 resolution: "browserify@npm:16.5.2" dependencies: @@ -12716,13 +12720,6 @@ __metadata: languageName: node linkType: hard -"charset@npm:^1.0.1": - version: 1.0.1 - resolution: "charset@npm:1.0.1" - checksum: adf747e7bc76c0e47dbfbb555ef376f5adb2e67cad35718f19a2d02e27589345ccaf3c6170c185d2cc82298241f8478cdcdcab8be8ec429bf56807885f3c5300 - languageName: node - linkType: hard - "check-more-types@npm:2.24.0, check-more-types@npm:^2.24.0": version: 2.24.0 resolution: "check-more-types@npm:2.24.0" @@ -15392,22 +15389,6 @@ __metadata: languageName: node linkType: hard -"ecstatic@npm:^4.1.4": - version: 4.1.4 - resolution: "ecstatic@npm:4.1.4" - dependencies: - charset: ^1.0.1 - he: ^1.1.1 - mime: ^2.4.1 - minimist: ^1.1.0 - on-finished: ^2.3.0 - url-join: ^4.0.0 - bin: - ecstatic: lib/bin.js - checksum: f1b1343ab6d84867effb48505ede0a1044c1a2fe2620702179e790a111a989781215892fb3f5885e9ab7529cbcf2634efb26e5245dff47c976918ec4631ba2d5 - languageName: node - linkType: hard - "ee-first@npm:1.1.0": version: 1.1.0 resolution: "ee-first@npm:1.1.0" @@ -19681,7 +19662,7 @@ __metadata: languageName: node linkType: hard -"he@npm:^1.1.1, he@npm:^1.2.0": +"he@npm:^1.2.0": version: 1.2.0 resolution: "he@npm:1.2.0" bin: @@ -24372,7 +24353,7 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis: languageName: node linkType: hard -"marked@npm:^4.0.12": +"marked@npm:^4.0.12, marked@npm:^4.0.18": version: 4.0.18 resolution: "marked@npm:4.0.18" bin: @@ -36191,13 +36172,6 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis: languageName: node linkType: hard -"url-join@npm:^4.0.0": - version: 4.0.1 - resolution: "url-join@npm:4.0.1" - checksum: f74e868bf25dbc8be6a8d7237d4c36bb5b6c62c72e594d5ab1347fe91d6af7ccd9eb5d621e30152e4da45c2e9a26bec21390e911ab54a62d4d82e76028374ee5 - languageName: node - linkType: hard - "url-loader@npm:^4.1.1": version: 4.1.1 resolution: "url-loader@npm:4.1.1" From 4f1e04d922f21d1c5d4cd632b059c9c1bf6d79ba Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Thu, 18 Aug 2022 23:09:22 +0200 Subject: [PATCH 08/11] example: migrate `multiple-instances` to ESM (#4007) --- .eslintrc.js | 1 + examples/multiple-instances/.gitignore | 1 - examples/multiple-instances/{readme.md => README.md} | 6 +++--- examples/multiple-instances/index.html | 8 ++++---- examples/multiple-instances/main.js | 9 ++++++--- examples/multiple-instances/package.json | 12 ++++++------ yarn.lock | 4 +--- 7 files changed, 21 insertions(+), 20 deletions(-) delete mode 100644 examples/multiple-instances/.gitignore rename examples/multiple-instances/{readme.md => README.md} (81%) diff --git a/.eslintrc.js b/.eslintrc.js index 323ac59ee12..d3982658a7c 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/multiple-instances/*.js', 'examples/transloadit-markdown-bin/*.js', 'private/dev/*.js', 'private/release/*.js', diff --git a/examples/multiple-instances/.gitignore b/examples/multiple-instances/.gitignore deleted file mode 100644 index 70a19130fe7..00000000000 --- a/examples/multiple-instances/.gitignore +++ /dev/null @@ -1 +0,0 @@ -uppy.min.css diff --git a/examples/multiple-instances/readme.md b/examples/multiple-instances/README.md similarity index 81% rename from examples/multiple-instances/readme.md rename to examples/multiple-instances/README.md index 54614c5ccde..7a6c9a1fe92 100644 --- a/examples/multiple-instances/readme.md +++ b/examples/multiple-instances/README.md @@ -8,8 +8,8 @@ It has two instances on the same page, side-by-side, but with different `id`s so To run this example, make sure you've correctly installed the **repository root**: ```bash -npm install -npm run build +corepack yarn install +corepack yarn build ``` That will also install the dependencies for this example. @@ -17,5 +17,5 @@ That will also install the dependencies for this example. Then, again in the **repository root**, start this example by doing: ```bash -npm run example multiple-instances +corepack yarn workspace @uppy-example/multiple-instances start ``` diff --git a/examples/multiple-instances/index.html b/examples/multiple-instances/index.html index a29319352ca..5eee75358ad 100644 --- a/examples/multiple-instances/index.html +++ b/examples/multiple-instances/index.html @@ -4,8 +4,6 @@ Uppy example: Multiple instances - - + +

Instance A

@@ -24,8 +24,8 @@

Instance B

+ - - + diff --git a/examples/multiple-instances/main.js b/examples/multiple-instances/main.js index d325b8b34c2..973432237be 100644 --- a/examples/multiple-instances/main.js +++ b/examples/multiple-instances/main.js @@ -1,6 +1,9 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const GoldenRetriever = require('@uppy/golden-retriever') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import GoldenRetriever from '@uppy/golden-retriever' + +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' // Initialise two Uppy instances with the GoldenRetriever plugin, // but with different `id`s. diff --git a/examples/multiple-instances/package.json b/examples/multiple-instances/package.json index 2a6b87feb53..33fe65a2807 100644 --- a/examples/multiple-instances/package.json +++ b/examples/multiple-instances/package.json @@ -1,17 +1,17 @@ { "name": "@uppy-example/multiple-instances", "version": "0.0.0", + "type": "module", "dependencies": { - "@babel/core": "^7.4.4", "@uppy/core": "workspace:*", "@uppy/dashboard": "workspace:*", - "@uppy/golden-retriever": "workspace:*", - "babelify": "^10.0.0", - "budo": "^11.6.1" + "@uppy/golden-retriever": "workspace:*" + }, + "devDependencies": { + "vite": "^3.0.0" }, "private": true, "scripts": { - "css": "cp ../../packages/uppy/dist/uppy.min.css .", - "start": "yarn run css && budo main.js:bundle.js -- -t babelify" + "start": "vite" } } diff --git a/yarn.lock b/yarn.lock index 75f27e28a35..408ccb96b80 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8137,12 +8137,10 @@ __metadata: version: 0.0.0-use.local resolution: "@uppy-example/multiple-instances@workspace:examples/multiple-instances" dependencies: - "@babel/core": ^7.4.4 "@uppy/core": "workspace:*" "@uppy/dashboard": "workspace:*" "@uppy/golden-retriever": "workspace:*" - babelify: ^10.0.0 - budo: ^11.6.1 + vite: ^3.0.0 languageName: unknown linkType: soft From f1ddd43765dc521aeeb615729a59973357a89d6a Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 19 Aug 2022 00:49:55 +0200 Subject: [PATCH 09/11] example: migrate `xhr-bundle` to ESM (#4012) --- .eslintrc.js | 1 + examples/xhr-bundle/.gitignore | 1 - examples/xhr-bundle/{readme.md => README.md} | 12 ++++++------ examples/xhr-bundle/index.html | 8 ++++---- examples/xhr-bundle/main.js | 9 ++++++--- examples/xhr-bundle/package.json | 17 ++++++++--------- examples/xhr-bundle/{serve.js => server.cjs} | 0 yarn.lock | 4 +--- 8 files changed, 26 insertions(+), 26 deletions(-) delete mode 100644 examples/xhr-bundle/.gitignore rename examples/xhr-bundle/{readme.md => README.md} (58%) rename examples/xhr-bundle/{serve.js => server.cjs} (100%) diff --git a/.eslintrc.js b/.eslintrc.js index d3982658a7c..f0c9f318e52 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -197,6 +197,7 @@ module.exports = { 'examples/custom-provider/client/*.js', 'examples/multiple-instances/*.js', 'examples/transloadit-markdown-bin/*.js', + 'examples/xhr-bundle/*.js', 'private/dev/*.js', 'private/release/*.js', 'private/remark-lint-uppy/*.js', diff --git a/examples/xhr-bundle/.gitignore b/examples/xhr-bundle/.gitignore deleted file mode 100644 index 70a19130fe7..00000000000 --- a/examples/xhr-bundle/.gitignore +++ /dev/null @@ -1 +0,0 @@ -uppy.min.css diff --git a/examples/xhr-bundle/readme.md b/examples/xhr-bundle/README.md similarity index 58% rename from examples/xhr-bundle/readme.md rename to examples/xhr-bundle/README.md index b357f68c3c3..fef3e256f7f 100644 --- a/examples/xhr-bundle/readme.md +++ b/examples/xhr-bundle/README.md @@ -2,21 +2,21 @@ This example uses Uppy with XHRUpload plugin in `bundle` mode. Bundle mode uploads all files to the endpoint in a single request, instead of firing off a new request for each file. This makes uploading a bit slower, but it may be easier to handle on the server side, depending on your setup. -[serve.js](./serve.js) contains an example express.js server that receives a multipart form-data upload and responds with some information about the files that were received (name, size) as JSON. It uses [multer](https://npmjs.com/package/multer) to parse the upload stream. +[`server.cjs`](./server.cjs) contains an example express.js server that receives a multipart form-data upload and responds with some information about the files that were received (name, size) as JSON. It uses [multer](https://npmjs.com/package/multer) to parse the upload stream. ## Run it To run this example, make sure you've correctly installed the **repository root**: -```bash -npm install -npm run build +```sh +corepack yarn install +corepack yarn build ``` That will also install the dependencies for this example. Then, again in the **repository root**, start this example by doing: -```bash -npm run example xhr-bundle +```sh +corepack yarn workspace @uppy-example/xhr-bundle start ``` diff --git a/examples/xhr-bundle/index.html b/examples/xhr-bundle/index.html index a73b084f04f..720d7633db0 100644 --- a/examples/xhr-bundle/index.html +++ b/examples/xhr-bundle/index.html @@ -4,8 +4,6 @@ Uppy example: XHRUpload to a single endpoint - - + +

files[]

@@ -21,7 +21,7 @@

files[]

- - + + diff --git a/examples/xhr-bundle/main.js b/examples/xhr-bundle/main.js index dc773108f4e..d9adf1eda11 100644 --- a/examples/xhr-bundle/main.js +++ b/examples/xhr-bundle/main.js @@ -1,6 +1,9 @@ -const Uppy = require('@uppy/core') -const Dashboard = require('@uppy/dashboard') -const XHRUpload = require('@uppy/xhr-upload') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import XHRUpload from '@uppy/xhr-upload' + +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' const uppy = new Uppy({ debug: true, diff --git a/examples/xhr-bundle/package.json b/examples/xhr-bundle/package.json index 7c36cd117fb..5971f61cc40 100644 --- a/examples/xhr-bundle/package.json +++ b/examples/xhr-bundle/package.json @@ -2,22 +2,21 @@ "name": "@uppy-example/xhr-bundle", "version": "0.0.0", "dependencies": { - "@babel/core": "^7.2.2", "@uppy/core": "workspace:*", "@uppy/dashboard": "workspace:*", "@uppy/xhr-upload": "workspace:*", - "babelify": "^10.0.0", - "budo": "^11.6.1", "cors": "^2.8.5", "express": "^4.16.4", - "multer": "^1.4.1", - "npm-run-all": "^4.1.5" + "multer": "^1.4.1" + }, + "devDependencies": { + "npm-run-all": "^4.1.5", + "vite": "^3.0.0" }, "private": true, "scripts": { - "css": "cp ../../packages/uppy/dist/uppy.min.css .", - "start": "run-p start:*", - "start:client": "yarn run css && budo main.js:bundle.js -- -t babelify", - "start:server": "node serve.js" + "start": "run-p start:server start:client", + "start:client": "vite", + "start:server": "node server.cjs" } } diff --git a/examples/xhr-bundle/serve.js b/examples/xhr-bundle/server.cjs similarity index 100% rename from examples/xhr-bundle/serve.js rename to examples/xhr-bundle/server.cjs diff --git a/yarn.lock b/yarn.lock index 408ccb96b80..e795c141329 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8356,16 +8356,14 @@ __metadata: version: 0.0.0-use.local resolution: "@uppy-example/xhr-bundle@workspace:examples/xhr-bundle" dependencies: - "@babel/core": ^7.2.2 "@uppy/core": "workspace:*" "@uppy/dashboard": "workspace:*" "@uppy/xhr-upload": "workspace:*" - babelify: ^10.0.0 - budo: ^11.6.1 cors: ^2.8.5 express: ^4.16.4 multer: ^1.4.1 npm-run-all: ^4.1.5 + vite: ^3.0.0 languageName: unknown linkType: soft From 8ac6091e1ab402e3711e9dc066df277d2609da71 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 19 Aug 2022 10:51:39 +0200 Subject: [PATCH 10/11] example: migrate `node-xhr` to ESM (#4008) --- .eslintrc.js | 1 + examples/node-xhr/.gitignore | 3 +-- examples/node-xhr/{readme.md => README.md} | 10 ++++---- examples/node-xhr/index.html | 4 +-- examples/node-xhr/main.js | 12 ++++++--- examples/node-xhr/package.json | 20 +++++++-------- examples/node-xhr/server.js | 29 ++++++++++++++-------- yarn.lock | 19 +++++++++----- 8 files changed, 58 insertions(+), 40 deletions(-) rename examples/node-xhr/{readme.md => README.md} (76%) mode change 100644 => 100755 examples/node-xhr/server.js diff --git a/.eslintrc.js b/.eslintrc.js index f0c9f318e52..88ab3dc9b72 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/node-xhr/*.js', 'examples/multiple-instances/*.js', 'examples/transloadit-markdown-bin/*.js', 'examples/xhr-bundle/*.js', diff --git a/examples/node-xhr/.gitignore b/examples/node-xhr/.gitignore index 4f15b1cceb5..8fc0d802717 100644 --- a/examples/node-xhr/.gitignore +++ b/examples/node-xhr/.gitignore @@ -1,2 +1 @@ -uppy.min.css -uploads +uploads/ diff --git a/examples/node-xhr/readme.md b/examples/node-xhr/README.md similarity index 76% rename from examples/node-xhr/readme.md rename to examples/node-xhr/README.md index 697a2f8da56..5913d02e5f0 100644 --- a/examples/node-xhr/readme.md +++ b/examples/node-xhr/README.md @@ -6,15 +6,15 @@ This example uses Node server and `@uppy/xhr-upload` to upload files to the loca To run this example, make sure you've correctly installed the **repository root**: -```bash -npm install -npm run build +```sh +corepack yarn install +corepack yarn build ``` That will also install the dependencies for this example. Then, again in the **repository root**, start this example by doing: -```bash -npm run example node-xhr +```sh +corepack yarn workspace @uppy-example/node-xhr start ``` diff --git a/examples/node-xhr/index.html b/examples/node-xhr/index.html index 25bccf949c9..b768a79a1aa 100644 --- a/examples/node-xhr/index.html +++ b/examples/node-xhr/index.html @@ -4,9 +4,9 @@ Node.js + Uppy Example - - + + diff --git a/examples/node-xhr/main.js b/examples/node-xhr/main.js index 670a844cda1..17552956630 100644 --- a/examples/node-xhr/main.js +++ b/examples/node-xhr/main.js @@ -1,7 +1,11 @@ -const Uppy = require('@uppy/core') -const Webcam = require('@uppy/webcam') -const Dashboard = require('@uppy/dashboard') -const XHRUpload = require('@uppy/xhr-upload') +import Uppy from '@uppy/core' +import Dashboard from '@uppy/dashboard' +import XHRUpload from '@uppy/xhr-upload' +import Webcam from '@uppy/webcam' + +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' +import '@uppy/webcam/dist/style.css' const uppy = new Uppy({ debug: true, diff --git a/examples/node-xhr/package.json b/examples/node-xhr/package.json index 3bcb27253ee..52aaa6421c7 100644 --- a/examples/node-xhr/package.json +++ b/examples/node-xhr/package.json @@ -1,24 +1,22 @@ { "name": "@uppy-example/node-xhr", "version": "0.0.0", + "type": "module", "dependencies": { - "@babel/core": "^7.4.4", "@uppy/core": "workspace:*", "@uppy/dashboard": "workspace:*", "@uppy/webcam": "workspace:*", "@uppy/xhr-upload": "workspace:*", - "babelify": "^10.0.0", - "budo": "^11.3.2", - "cookie-parser": "^1.4.6", - "cors": "^2.8.4", - "formidable": "^1.2.1", - "npm-run-all": "^4.1.3" + "formidable": "^3.2.4" + }, + "devDependencies": { + "npm-run-all": "^4.1.3", + "vite": "^3.0.0" }, "private": true, "scripts": { - "copy": "cp ../../packages/uppy/dist/uppy.min.css .", - "start": "npm-run-all --serial copy --parallel start:*", - "start:client": "budo main.js:bundle.js -- -t babelify", - "start:server": "mkdir -p uploads && node server.js" + "start": "npm-run-all --parallel start:server start:client", + "start:client": "vite", + "start:server": "node server.js" } } diff --git a/examples/node-xhr/server.js b/examples/node-xhr/server.js old mode 100644 new mode 100755 index c86461dc8c5..d62135d3795 --- a/examples/node-xhr/server.js +++ b/examples/node-xhr/server.js @@ -1,5 +1,16 @@ -const formidable = require('formidable') -const http = require('node:http') +#!/usr/bin/env node + +/* eslint-disable no-console */ + +import http from 'node:http' +import { fileURLToPath } from 'node:url' +import { mkdir } from 'node:fs/promises' + +import formidable from 'formidable' + +const UPLOAD_DIR = new URL('./uploads/', import.meta.url) + +await mkdir(UPLOAD_DIR, { recursive: true }) http.createServer((req, res) => { const headers = { @@ -17,9 +28,10 @@ http.createServer((req, res) => { } if (req.url === '/upload' && req.method.toLowerCase() === 'post') { // parse a file upload - const form = new formidable.IncomingForm() - form.uploadDir = './uploads' - form.keepExtensions = true + const form = formidable({ + keepExtensions: true, + uploadDir: fileURLToPath(UPLOAD_DIR), + }) form.parse(req, (err, fields, files) => { if (err) { @@ -28,11 +40,8 @@ http.createServer((req, res) => { res.write(JSON.stringify(err)) return res.end() } - const file = files['files[]'] - console.log('saved file to', file.path) - console.log('original name', file.name) - console.log('type', file.type) - console.log('size', file.size) + const { file:[{ filepath, originalFilename, mimetype, size }] } = files + console.log('saved file', { filepath, originalFilename, mimetype, size }) res.writeHead(200, headers) res.write(JSON.stringify({ fields, files })) return res.end() diff --git a/yarn.lock b/yarn.lock index e795c141329..1ee5613f331 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8148,17 +8148,13 @@ __metadata: version: 0.0.0-use.local resolution: "@uppy-example/node-xhr@workspace:examples/node-xhr" dependencies: - "@babel/core": ^7.4.4 "@uppy/core": "workspace:*" "@uppy/dashboard": "workspace:*" "@uppy/webcam": "workspace:*" "@uppy/xhr-upload": "workspace:*" - babelify: ^10.0.0 - budo: ^11.3.2 - cookie-parser: ^1.4.6 - cors: ^2.8.4 - formidable: ^1.2.1 + formidable: ^3.2.4 npm-run-all: ^4.1.3 + vite: ^3.0.0 languageName: unknown linkType: soft @@ -18507,6 +18503,17 @@ __metadata: languageName: node linkType: hard +"formidable@npm:^3.2.4": + version: 3.2.4 + resolution: "formidable@npm:3.2.4" + dependencies: + dezalgo: 1.0.3 + hexoid: 1.0.0 + once: 1.4.0 + checksum: 23df0f9e1d5eca3546dc56764a56dc402d0156d6a9c900c6e1f071812eeaf12637e5e368a34106f65522356d6080336b7f793b75bebbfff18950bed1d6ae92d4 + languageName: node + linkType: hard + "forwarded@npm:0.2.0": version: 0.2.0 resolution: "forwarded@npm:0.2.0" From 655b8ba61bc07085ea3fb1e0f12e01a8ccd97447 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Fri, 19 Aug 2022 10:56:38 +0200 Subject: [PATCH 11/11] example: migrate `php-xhr` to ESM (#4009) --- .eslintrc.js | 3 ++- examples/php-xhr/.gitignore | 3 +-- examples/php-xhr/{readme.md => README.md} | 10 +++++----- examples/php-xhr/index.html | 3 +-- examples/php-xhr/main.js | 12 ++++++++---- examples/php-xhr/package.json | 21 +++++++++------------ examples/php-xhr/requirements.txt | 3 --- examples/php-xhr/{upload.php => server.php} | 10 +++++----- yarn.lock | 7 +------ 9 files changed, 32 insertions(+), 40 deletions(-) rename examples/php-xhr/{readme.md => README.md} (76%) delete mode 100644 examples/php-xhr/requirements.txt rename examples/php-xhr/{upload.php => server.php} (80%) diff --git a/.eslintrc.js b/.eslintrc.js index 88ab3dc9b72..0a2e6ea036c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -195,8 +195,9 @@ module.exports = { 'examples/aws-presigned-url/*.js', 'examples/bundled/*.js', 'examples/custom-provider/client/*.js', - 'examples/node-xhr/*.js', 'examples/multiple-instances/*.js', + 'examples/node-xhr/*.js', + 'examples/php-xhr/*.js', 'examples/transloadit-markdown-bin/*.js', 'examples/xhr-bundle/*.js', 'private/dev/*.js', diff --git a/examples/php-xhr/.gitignore b/examples/php-xhr/.gitignore index 4f15b1cceb5..8fc0d802717 100644 --- a/examples/php-xhr/.gitignore +++ b/examples/php-xhr/.gitignore @@ -1,2 +1 @@ -uppy.min.css -uploads +uploads/ diff --git a/examples/php-xhr/readme.md b/examples/php-xhr/README.md similarity index 76% rename from examples/php-xhr/readme.md rename to examples/php-xhr/README.md index 28968f35913..71f74de4325 100644 --- a/examples/php-xhr/readme.md +++ b/examples/php-xhr/README.md @@ -6,15 +6,15 @@ This example uses PHP server and `@uppy/xhr-upload` to upload files to the local To run this example, make sure you've correctly installed the **repository root**: -```bash -npm install -npm run build +```sh +corepack yarn install +corepack yarn build ``` That will also install the dependencies for this example. Then, again in the **repository root**, start this example by doing: -```bash -npm run example php-xhr +```sh +corepack yarn workspace @uppy-example/php-xhr start ``` diff --git a/examples/php-xhr/index.html b/examples/php-xhr/index.html index dd6992432a8..8a98441ecfa 100644 --- a/examples/php-xhr/index.html +++ b/examples/php-xhr/index.html @@ -4,9 +4,8 @@ PHP + Uppy Example - - + diff --git a/examples/php-xhr/main.js b/examples/php-xhr/main.js index 0fd6963f9dd..92543820b36 100644 --- a/examples/php-xhr/main.js +++ b/examples/php-xhr/main.js @@ -1,7 +1,11 @@ -const Uppy = require('@uppy/core') -const Webcam = require('@uppy/webcam') -const Dashboard = require('@uppy/dashboard') -const XHRUpload = require('@uppy/xhr-upload') +import Uppy from '@uppy/core' +import Webcam from '@uppy/webcam' +import Dashboard from '@uppy/dashboard' +import XHRUpload from '@uppy/xhr-upload' + +import '@uppy/core/dist/style.css' +import '@uppy/dashboard/dist/style.css' +import '@uppy/webcam/dist/style.css' const uppy = new Uppy({ debug: true, diff --git a/examples/php-xhr/package.json b/examples/php-xhr/package.json index 48dd8772900..a009ccf3a1b 100644 --- a/examples/php-xhr/package.json +++ b/examples/php-xhr/package.json @@ -1,24 +1,21 @@ { "name": "@uppy-example/php-xhr", "version": "0.0.0", + "type": "module", "dependencies": { - "@babel/core": "^7.4.4", "@uppy/core": "workspace:*", "@uppy/dashboard": "workspace:*", "@uppy/webcam": "workspace:*", - "@uppy/xhr-upload": "workspace:*", - "babelify": "^10.0.0", - "budo": "^11.3.2", - "cookie-parser": "^1.4.6", - "cors": "^2.8.4", - "formidable": "^1.2.1", - "npm-run-all": "^4.1.3" + "@uppy/xhr-upload": "workspace:*" + }, + "devDependencies": { + "npm-run-all": "^4.1.3", + "vite": "^3.0.0" }, "private": true, "scripts": { - "copy": "cp ../../packages/uppy/dist/uppy.min.css .", - "start": "npm-run-all --serial copy --parallel start:*", - "start:client": "budo main.js:bundle.js -- -t babelify", - "start:server": "mkdir -p uploads && php -S 0.0.0.0:3020" + "start": "npm-run-all --parallel start:server start:client", + "start:client": "vite", + "start:server": "mkdir -p uploads && php -S 0.0.0.0:3020 server.php" } } diff --git a/examples/php-xhr/requirements.txt b/examples/php-xhr/requirements.txt deleted file mode 100644 index ba5902e8e23..00000000000 --- a/examples/php-xhr/requirements.txt +++ /dev/null @@ -1,3 +0,0 @@ -flask -werkzeug -flask-cors \ No newline at end of file diff --git a/examples/php-xhr/upload.php b/examples/php-xhr/server.php similarity index 80% rename from examples/php-xhr/upload.php rename to examples/php-xhr/server.php index 08b9a1e0b8e..7617025775a 100644 --- a/examples/php-xhr/upload.php +++ b/examples/php-xhr/server.php @@ -18,14 +18,14 @@ exit(0); } -if ($_POST && !empty($_FILES["files"])) { - $target_dir = './uploads/'; - $target_file = $target_dir . basename($_FILES['files']['name'][0]); +if ($_POST && !empty($_FILES["file"])) { + $target_dir = __DIR__ . DIRECTORY_SEPARATOR . 'uploads'; + $target_file = $target_dir . DIRECTORY_SEPARATOR . basename($_FILES['file']['name']); try { - if (move_uploaded_file($_FILES['files']['tmp_name'][0], $target_file)) { + if (move_uploaded_file($_FILES['file']['tmp_name'], $target_file)) { header('Access-Control-Allow-Origin: *'); header('Content-type: application/json'); - $data = ['url' => $target_file, 'message' => 'The file ' . basename($_FILES['files']['name'][0]) . ' has been uploaded.']; + $data = ['url' => $target_file, 'message' => 'The file ' . basename($_FILES['file']['name']) . ' has been uploaded.']; http_response_code(201); echo json_encode($data); } else { diff --git a/yarn.lock b/yarn.lock index 1ee5613f331..a7c877a4fd3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8162,17 +8162,12 @@ __metadata: version: 0.0.0-use.local resolution: "@uppy-example/php-xhr@workspace:examples/php-xhr" dependencies: - "@babel/core": ^7.4.4 "@uppy/core": "workspace:*" "@uppy/dashboard": "workspace:*" "@uppy/webcam": "workspace:*" "@uppy/xhr-upload": "workspace:*" - babelify: ^10.0.0 - budo: ^11.3.2 - cookie-parser: ^1.4.6 - cors: ^2.8.4 - formidable: ^1.2.1 npm-run-all: ^4.1.3 + vite: ^3.0.0 languageName: unknown linkType: soft