diff --git a/.eslintrc.js b/.eslintrc.js index afc8710243a..b9e1abc235b 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -195,7 +195,12 @@ module.exports = { 'examples/aws-presigned-url/*.js', 'examples/bundled/*.js', 'examples/custom-provider/client/*.js', + 'examples/multiple-instances/*.js', + 'examples/node-xhr/*.js', + 'examples/php-xhr/*.js', 'examples/python-xhr/*.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/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/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/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/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/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/examples/svelte-example/README.md b/examples/svelte-example/README.md index 29c747ffee8..2a7064a0ae0 100644 --- a/examples/svelte-example/README.md +++ b/examples/svelte-example/README.md @@ -1,3 +1,16 @@ -# `svelte-example` +# Uppy with Svelte -More info coming soon... +## Run it + +To run this example, make sure you've correctly installed the **repository root**: + +```sh +corepack yarn install +corepack yarn build +``` + +Then, again in the **repository root**, start this example by doing: + +```sh +corepack yarn workspace @uppy-example/svelte-app dev +``` diff --git a/examples/transloadit-markdown-bin/README.md b/examples/transloadit-markdown-bin/README.md new file mode 100644 index 00000000000..2d22d995634 --- /dev/null +++ b/examples/transloadit-markdown-bin/README.md @@ -0,0 +1,20 @@ +# Uppy Markdown Editor + +This example uses Uppy to handle images in a markdown editor. + +## Run it + +To run this example, make sure you've correctly installed the **repository root**: + +```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: + +```sh +corepack yarn workspace @uppy-example/transloadit-markdown-bin start +``` \ No newline at end of file diff --git a/examples/transloadit-textarea/index.html b/examples/transloadit-markdown-bin/index.html similarity index 95% rename from examples/transloadit-textarea/index.html rename to examples/transloadit-markdown-bin/index.html index 0feddc7f912..6c9bee1bfe5 100644 --- a/examples/transloadit-textarea/index.html +++ b/examples/transloadit-markdown-bin/index.html @@ -2,10 +2,9 @@ - + +

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/package.json b/package.json index b192fa35c48..6b13ff4f3a5 100644 --- a/package.json +++ b/package.json @@ -17,11 +17,6 @@ "@uppy-dev/remark-lint-uppy" ] }, - "size-limit": [ - { - "path": "packages/uppy/index.js" - } - ], "pre-commit": "lint:staged", "license": "MIT", "engines": { @@ -51,8 +46,6 @@ "@babel/preset-env": "^7.14.7", "@babel/register": "^7.10.5", "@babel/types": "^7.17.0", - "@size-limit/preset-big-lib": "^8.0.0", - "@size-limit/webpack-why": "^8.0.0", "@types/jasmine": "file:./private/@types/jasmine", "@types/jasminewd2": "file:./private/@types/jasmine", "@typescript-eslint/eslint-plugin": "^5.0.0", @@ -103,7 +96,6 @@ "remark-cli": "^11.0.0", "resolve": "^1.17.0", "sass": "^1.29.0", - "size-limit": "^8.0.0", "start-server-and-test": "^1.14.0", "stylelint": "^14.0.0", "stylelint-config-rational-order": "^0.1.2", @@ -153,7 +145,6 @@ "test:type": "yarn workspaces foreach -piv --include '@uppy/*' --exclude '@uppy/{angular,react-native,locales,companion,provider-views,robodog,svelte}' exec tsd", "test:unit": "yarn run build:lib && NODE_OPTIONS=--experimental-vm-modules jest --env jsdom", "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --env jsdom --watch --no-coverage", - "test:size": "yarn build:lib && size-limit --why", "test": "npm-run-all lint test:locale-packs:unused test:unit test:type test:companion", "uploadcdn": "yarn node ./bin/upload-to-cdn.js", "version": "yarn node ./bin/after-version-bump.js", diff --git a/packages/@uppy/aws-s3/src/MiniXHRUpload.js b/packages/@uppy/aws-s3/src/MiniXHRUpload.js index 87a7148ee0c..b4b3e2fa4ea 100644 --- a/packages/@uppy/aws-s3/src/MiniXHRUpload.js +++ b/packages/@uppy/aws-s3/src/MiniXHRUpload.js @@ -100,8 +100,12 @@ export default class MiniXHRUpload { } #addEventHandlerForFile (eventName, fileID, eventHandler) { - this.uploaderEvents[fileID].on(eventName, (targetFileID) => { - if (fileID === targetFileID) eventHandler() + this.uploaderEvents[fileID].on(eventName, (fileOrID) => { + // TODO (major): refactor Uppy events to consistently send file objects (or consistently IDs) + // We created a generic `addEventListenerForFile` but not all events + // use file IDs, some use files, so we need to do this weird check. + const id = fileOrID?.id ?? fileOrID + if (fileID === id) eventHandler() }) } diff --git a/packages/@uppy/core/src/_common.scss b/packages/@uppy/core/src/_common.scss index 119dbb9f7dc..ff0e9254bf4 100644 --- a/packages/@uppy/core/src/_common.scss +++ b/packages/@uppy/core/src/_common.scss @@ -33,59 +33,9 @@ // Utilities .uppy-u-reset { - top: auto; - left: auto; - z-index: auto; - display: inline; - float: none; - clear: none; - min-width: 0; - max-width: none; - min-height: 0; - max-height: none; - margin: 0; - padding: 0; - overflow: visible; - overflow-x: visible; - overflow-y: visible; - color: inherit; - font-weight: normal; - font-size: inherit; - font-family: inherit; - font-style: normal; - font-variant: normal; - font-stretch: normal; - line-height: 1; - letter-spacing: normal; - white-space: normal; - text-align: left; - text-transform: none; - text-decoration: none; - text-indent: 0; - text-shadow: none; - vertical-align: baseline; - hyphens: none; - unicode-bidi: normal; - list-style: none; - empty-cells: show; - background: none; - border: 0; - border: medium none currentColor; - border-radius: 0; - border-image: none; - border-collapse: separate; - border-spacing: 0; - outline: medium none invert; - box-shadow: none; - transform: none; - transform-origin: 50% 50% 0; - transform-style: flat; - backface-visibility: visible; - visibility: visible; - cursor: auto; - opacity: 1; - transition: none 0s ease 0s; - -webkit-appearance: none; + all: initial; + box-sizing: border-box; + appearance: none; } [dir="rtl"] .uppy-u-reset { @@ -138,14 +88,17 @@ // Buttons .uppy-c-btn { - display: inline-block; + display: inline-flex; + justify-content: center; + align-items: center; font-weight: 500; - font-size: 16px; + font-size: inherit; font-family: inherit; + color: inherit; line-height: 1; white-space: nowrap; text-align: center; - vertical-align: middle; + // vertical-align: middle; transition-duration: 0.3s; transition-property: background-color, color; user-select: none; @@ -220,14 +173,3 @@ color: $gray-500; } } - -.uppy-c-btn--small { - padding: 7px 16px; - font-size: 0.9em; - border-radius: 2px; - - .uppy-size--md & { - padding: 8px 10px; - border-radius: 2px; - } -} diff --git a/packages/@uppy/core/src/_variables.scss b/packages/@uppy/core/src/_variables.scss index 9e7a972deff..be12d72f389 100644 --- a/packages/@uppy/core/src/_variables.scss +++ b/packages/@uppy/core/src/_variables.scss @@ -1,5 +1,6 @@ // Fonts -$font-family-base: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default; + +$font-family-base: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Symbol", "Segoe UI Emoji", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif !default; $font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; // Colors diff --git a/packages/@uppy/dashboard/src/components/AddFiles.jsx b/packages/@uppy/dashboard/src/components/AddFiles.jsx index d46ca17b024..23be378855c 100644 --- a/packages/@uppy/dashboard/src/components/AddFiles.jsx +++ b/packages/@uppy/dashboard/src/components/AddFiles.jsx @@ -151,7 +151,7 @@ class AddFiles extends Component { return (