@uppy/vue: add Vue FileInput component (#3125)

package-lock.json

@@ -79438,6 +79438,7 @@
       "dependencies": {
         "@uppy/dashboard": "file:../dashboard",
         "@uppy/drag-drop": "file:../drag-drop",
+        "@uppy/file-input": "file:../file-input",
         "@uppy/progress-bar": "file:../progress-bar",
         "@uppy/status-bar": "file:../status-bar",
         "shallow-equal": "^1.2.1"
@@ -93361,6 +93362,7 @@
       "requires": {
         "@uppy/dashboard": "file:../dashboard",
         "@uppy/drag-drop": "file:../drag-drop",
+        "@uppy/file-input": "file:../file-input",
         "@uppy/progress-bar": "file:../progress-bar",
         "@uppy/status-bar": "file:../status-bar",
         "shallow-equal": "^1.2.1",

packages/@uppy/vue/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@uppy/dashboard": "file:../dashboard",
     "@uppy/drag-drop": "file:../drag-drop",
+    "@uppy/file-input": "file:../file-input",
     "@uppy/progress-bar": "file:../progress-bar",
     "@uppy/status-bar": "file:../status-bar",
     "shallow-equal": "^1.2.1"

packages/@uppy/vue/src/file-input.js

@@ -0,0 +1,74 @@
+import FileInputPlugin from '@uppy/file-input'
+import { shallowEqualObjects } from 'shallow-equal'
+
+// Cross compatibility dependencies
+import * as Vue from 'vue'
+import { isVue2 } from './utils'
+
+export default {
+  data () {
+    return {
+      plugin: {},
+    }
+  },
+  props: {
+    uppy: {
+      required: true,
+    },
+    props: {
+      type: Object,
+    },
+  },
+  mounted () {
+    this.installPlugin()
+  },
+  methods: {
+    installPlugin () {
+      const { uppy } = this
+      const options = {
+        id: 'vue:FileInput',
+        ...this.props,
+        target: this.$refs.container,
+      }
+      uppy.use(FileInputPlugin, options)
+      this.plugin = uppy.getPlugin(options.id)
+    },
+    uninstallPlugin (uppy) {
+      uppy.removePlugin(this.plugin)
+    },
+  },
+  beforeDestroy () {
+    this.uninstallPlugin(this.uppy)
+  },
+  beforeUnmount () {
+    this.uninstallPlugin(this.uppy)
+  },
+  watch: {
+    uppy (current, old) {
+      if (old !== current) {
+        this.uninstallPlugin(old)
+        this.installPlugin()
+      }
+    },
+    props (current, old) {
+      if (!shallowEqualObjects(current, old)) {
+        this.plugin.setOptions({ ...current })
+      }
+    },
+  },
+  render (...args) {
+    // Hack to allow support for Vue 2 and 3
+    if (isVue2(...args)) {
+      // If it's first argument is a function, then it's a Vue 2 App
+      const [createElement] = args
+      return createElement('div', {
+        ref: 'container',
+      })
+    }
+
+    // Otherwise, we import the `h` function from the Vue package (in Vue 3 fashion)
+    return Vue.h('div', {
+      ref: 'container',
+    })
+  },
+}

packages/@uppy/vue/types/file-input.d.ts

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import type { Uppy, UIPlugin, BasePlugin } from '@uppy/core'
+
+interface Data {
+    plugin: UIPlugin | BasePlugin;
+}
+interface Props {
+    uppy: Uppy;
+    props: Record<string, unknown>;
+}
+interface Methods {
+    installPlugin(): void;
+    uninstallPlugin(uppy: Uppy): void;
+}
+declare const exports: import('vue/types/vue').ExtendedVue<Vue, Data, Methods, unknown, Props>
+export default exports

packages/@uppy/vue/types/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Dashboard } from './dashboard'
 export { default as DashboardModal } from './dashboard-modal'
 export { default as DragDrop } from './drag-drop'
+export { default as FileInput } from './file-input'
 export { default as ProgressBar } from './progress-bar'
 export { default as StatusBar } from './status-bar'

packages/@uppy/vue/types/index.test-d.ts

@@ -1 +1 @@
-// import { Dashboard, DashboardModal, DragDrop, StatusBar, ProgressBar } from '.'
+// import { Dashboard, DashboardModal, DragDrop, FileInput, StatusBar, ProgressBar } from '.'