Merge branch 'main' of https://github.com/transloadit/uppy into remov…

…e-robodog

.eslintrc.js

@@ -199,6 +199,7 @@ module.exports = {
         'examples/node-xhr/*.js',
         'examples/php-xhr/*.js',
         'examples/python-xhr/*.js',
+        'examples/transloadit/*.js',
         'examples/transloadit-markdown-bin/*.js',
         'examples/transloadit/*.js',
         'examples/xhr-bundle/*.js',

examples/svelte-example/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "build": "rollup -c",
+    "serve": "sirv public",
     "start:client": "rollup -c -w",
     "start:server": "node ./server.mjs",
     "start": "npm-run-all --parallel start:client start:server",

examples/svelte-example/rollup.config.js

@@ -19,7 +19,7 @@ function serve () {
   return {
     writeBundle () {
       if (server) return
-      server = require('node:child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+      server = require('node:child_process').spawn('npm', ['run', 'serve', '--', '--dev'], {
         stdio: ['ignore', 'inherit', 'inherit'],
         shell: true,
       })

examples/transloadit/README.md

@@ -18,4 +18,4 @@ Then, again in the **repository root**, start this example by doing:
 
 ```sh
 corepack yarn workspace @uppy-example/transloadit start
-```
+```

examples/transloadit/main.js

@@ -47,7 +47,6 @@ const formUppy = new Uppy({
   .use(Form, {
     target: '#test-form',
     fields: ['message'],
-    // submitOnSuccess: true,
     addResultToForm: true,
   })
   .use(Transloadit, {
@@ -164,7 +163,7 @@ const dashboardModal = new Uppy({
 dashboardModal.on('complete', ({ transloadit, successful, failed }) => {
   console.log(transloadit)
   console.log(successful)
-  console.error(failed)
+  console.log(failed)
 })
 
 function openModal () {

examples/transloadit/package.json

@@ -3,7 +3,13 @@
   "version": "0.0.0",
   "type": "module",
   "devDependencies": {
-    "vite": "^3.0.0"
+    "@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"
   },
   "dependencies": {
     "@uppy/core": "workspace:*",

examples/transloadit/rollup.config.js

@@ -0,0 +1,70 @@
+import { spawn } from 'node:child_process'
+
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import livereload from 'rollup-plugin-livereload'
+import { terser } from 'rollup-plugin-terser'
+import css from 'rollup-plugin-css-only'
+
+const production = !process.env.ROLLUP_WATCH
+
+function serve () {
+  let server
+
+  function toExit () {
+    if (server) server.kill(0)
+  }
+
+  return {
+    writeBundle () {
+      if (server) return
+      server = spawn('npm', ['run', 'serve', '--', '--dev'], {
+        stdio: ['ignore', 'inherit', 'inherit'],
+        shell: true,
+      })
+
+      process.on('SIGTERM', toExit)
+      process.on('exit', toExit)
+    },
+  }
+}
+
+export default {
+  input: 'main.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'bundle.js',
+  },
+  plugins: [
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'uppy.min.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+    }),
+    commonjs(),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
+}

examples/transloadit/server.cjs

@@ -88,8 +88,8 @@ function FormFields (fields) {
       try {
         value = JSON.stringify(
           JSON.parse(value),
-          null, 
-          2
+          null,
+          2,
         )
         isValueJSON = true
       } catch {

examples/vue/README.md

@@ -7,5 +7,6 @@ To run the example, from the root directory of this repo, run the following comm
 
 ```sh
 corepack yarn install
+corepack yarn build
 corepack yarn workspace @uppy-example/vue2 dev
 ```

examples/vue3/README.md

@@ -5,5 +5,6 @@ To run the example, from the root directory of this repo, run the following comm
 ```sh
 cp .env.example .env
 corepack yarn install
+corepack yarn build
 corepack yarn workspace @uppy-example/vue3 dev
 ```

examples/vue3/vite.config.js

@@ -1,7 +1,11 @@
+import { fileURLToPath } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
+const ROOT = new URL('../../', import.meta.url)
+
 // https://vitejs.dev/config/
 export default defineConfig({
+  envDir: fileURLToPath(ROOT),
   plugins: [vue()],
 })

packages/@uppy/core/src/Uppy.js

@@ -434,6 +434,18 @@ class Uppy {
    * The `files` value is passed in because it may be updated by the caller without updating the store.
    */
   #checkAndCreateFileStateObject (files, fileDescriptor) {
+    // Uppy expects files in { name, type, size, data } format.
+    // If the actual File object is passed from input[type=file] or drag-drop,
+    // we normalize it to match Uppy file object
+    if (fileDescriptor instanceof File) {
+      fileDescriptor = {
+        name: fileDescriptor.name,
+        type: fileDescriptor.type,
+        size: fileDescriptor.size,
+        data: fileDescriptor,
+      }
+    }
+
     const fileType = getFileType(fileDescriptor)
     const fileName = getFileName(fileType, fileDescriptor)
     const fileExtension = getFileNameAndExtension(fileName).extension

packages/@uppy/core/src/Uppy.test.js

@@ -736,6 +736,14 @@ describe('src/Core', () => {
       expect(fileAddedEventMock.mock.calls[0][0]).toEqual(newFile)
     })
 
+    it('should add a file from a File object', () => {
+      const fileData = new File([sampleImage], { type: 'image/jpeg' })
+      const core = new Core()
+
+      const fileId = core.addFile(fileData)
+      expect(core.getFile(fileId).id).toEqual(fileId)
+    })
+
     it('should not allow a file that does not meet the restrictions', () => {
       const core = new Core({
         restrictions: {

packages/@uppy/react/package.json

@@ -22,11 +22,6 @@
     "url": "git+https://github.com/transloadit/uppy.git"
   },
   "dependencies": {
-    "@uppy/dashboard": "workspace:^",
-    "@uppy/drag-drop": "workspace:^",
-    "@uppy/file-input": "workspace:^",
-    "@uppy/progress-bar": "workspace:^",
-    "@uppy/status-bar": "workspace:^",
     "@uppy/utils": "workspace:^",
     "prop-types": "^15.6.1"
   },
@@ -36,6 +31,28 @@
   },
   "peerDependencies": {
     "@uppy/core": "workspace:^",
+    "@uppy/dashboard": "workspace:^",
+    "@uppy/drag-drop": "workspace:^",
+    "@uppy/file-input": "workspace:^",
+    "@uppy/progress-bar": "workspace:^",
+    "@uppy/status-bar": "workspace:^",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@uppy/dashboard": {
+      "optional": true
+    },
+    "@uppy/drag-drop": {
+      "optional": true
+    },
+    "@uppy/file-input": {
+      "optional": true
+    },
+    "@uppy/progress-bar": {
+      "optional": true
+    },
+    "@uppy/status-bar": {
+      "optional": true
+    }
   }
 }

packages/@uppy/tus/src/index.js

@@ -256,7 +256,7 @@ export default class Tus extends BasePlugin {
         }
 
         this.resetUploaderReferences(file.id)
-        queuedRequest.abort()
+        queuedRequest?.abort()
 
         this.uppy.emit('upload-error', file, err)
 

website/src/docs/react-dashboard-modal.md

@@ -14,7 +14,7 @@ The `<DashboardModal />` component wraps the [`@uppy/dashboard`][] plugin, allow
 Install from NPM:
 
 ```shell
-npm install @uppy/react
+npm install @uppy/react @uppy/dashboard @uppy/core
 ```
 
 ```js

website/src/docs/react-dashboard.md

@@ -14,7 +14,7 @@ The `<Dashboard />` component wraps the [`@uppy/dashboard`][] plugin. It only re
 Install from NPM:
 
 ```shell
-npm install @uppy/react
+npm install @uppy/react @uppy/dashboard @uppy/core
 ```
 
 ```js

website/src/docs/react-dragdrop.md

@@ -15,7 +15,7 @@ The `<DragDrop />` component wraps the [`@uppy/drag-drop`](/docs/drag-drop/) plu
 Install from NPM:
 
 ```shell
-npm install @uppy/react
+npm install @uppy/react @uppy/drag-drop @uppy/core
 ```
 
 ```js

website/src/docs/react-fileinput.md

@@ -15,7 +15,7 @@ The `<FileInput />` component wraps the [`@uppy/file-input`](/docs/file-input/)
 Install from NPM:
 
 ```shell
-npm install @uppy/react
+npm install @uppy/react @uppy/file-input @uppy/core
 ```
 
 ```js

website/src/docs/react-progressbar.md

@@ -15,7 +15,7 @@ The `<ProgressBar />` component wraps the [`@uppy/progress-bar`][] plugin.
 Install from NPM:
 
 ```shell
-npm install @uppy/react
+npm install @uppy/react @uppy/progress-bar @uppy/core
 ```
 
 ```js

website/src/docs/react-statusbar.md

@@ -15,7 +15,7 @@ The `<StatusBar />` component wraps the [`@uppy/status-bar`][] plugin.
 Install from NPM:
 
 ```shell
-npm install @uppy/react
+npm install @uppy/react @uppy/status-bar @uppy/core
 ```
 
 ```js

website/src/docs/react.md

@@ -73,13 +73,14 @@ const AvatarPicker = ({ currentAvatar }) => {
 }
 ```
 
-The following plugins are available as React component wrappers:
-
-* [\<Dashboard />][<Dashboard />] - renders an inline [`@uppy/dashboard`][]
-* [\<DashboardModal />][<DashboardModal />] - renders a [`@uppy/dashboard`][] modal
-* [\<DragDrop />][<DragDrop />] - renders a [`@uppy/drag-drop`][] area
-* [\<ProgressBar />][<ProgressBar />] - renders a [`@uppy/progress-bar`][]
-* [\<StatusBar />][<StatusBar />] - renders a [`@uppy/status-bar`][]
+The following plugins are available as React component wrappers (you need to
+install each package separately):
+
+* [\<Dashboard />][<Dashboard />] - renders an inline [`@uppy/dashboard`][].
+* [\<DashboardModal />][<DashboardModal />] - renders a [`@uppy/dashboard`][] modal.
+* [\<DragDrop />][<DragDrop />] - renders a [`@uppy/drag-drop`][] area.
+* [\<ProgressBar />][<ProgressBar />] - renders a [`@uppy/progress-bar`][].
+* [\<StatusBar />][<StatusBar />] - renders a [`@uppy/status-bar`][].
 
 [React]: https://facebook.github.io/react
 

yarn.lock

@@ -8285,6 +8285,8 @@ __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:*"
@@ -8296,7 +8298,11 @@ __metadata:
     "@uppy/webcam": "workspace:*"
     express: ^4.16.4
     he: ^1.2.0
-    vite: ^3.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
   languageName: unknown
   linkType: soft
 
@@ -8755,17 +8761,28 @@ __metadata:
   resolution: "@uppy/react@workspace:packages/@uppy/react"
   dependencies:
     "@types/react": ^18.0.8
-    "@uppy/dashboard": "workspace:^"
-    "@uppy/drag-drop": "workspace:^"
-    "@uppy/file-input": "workspace:^"
-    "@uppy/progress-bar": "workspace:^"
-    "@uppy/status-bar": "workspace:^"
     "@uppy/utils": "workspace:^"
     prop-types: ^15.6.1
     react: ^18.1.0
   peerDependencies:
     "@uppy/core": "workspace:^"
+    "@uppy/dashboard": "workspace:^"
+    "@uppy/drag-drop": "workspace:^"
+    "@uppy/file-input": "workspace:^"
+    "@uppy/progress-bar": "workspace:^"
+    "@uppy/status-bar": "workspace:^"
     react: ^16.0.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@uppy/dashboard":
+      optional: true
+    "@uppy/drag-drop":
+      optional: true
+    "@uppy/file-input":
+      optional: true
+    "@uppy/progress-bar":
+      optional: true
+    "@uppy/status-bar":
+      optional: true
   languageName: unknown
   linkType: soft