File Input Vue plugin not being exported

[Dawdre]

Initial checklist

• I understand this is a bug report and questions should be posted in the Community Forum
• I searched issues and couldn’t find anything (or linked relevant results below)

Link to runnable example

No response

Steps to reproduce

<script lang="ts">
import { FileInput } from "@uppy/vue";

export default defineComponent({
 components: { FileInput },
 setup() {
  const uppy = new Uppy({});

  return { uppy };
 }
})
</script>

<template>
 <FileInput :uppy="uppy"/>
</template>

"@uppy/dashboard": "^3.5.1",
"@uppy/drag-drop": "^3.0.3",
"@uppy/drop-target": "^2.0.1",
"@uppy/file-input": "^3.0.3",
"@uppy/progress-bar": "^3.0.3",
"@uppy/status-bar": "^3.2.4",
"@uppy/vue": "^1.0.2",
"@uppy/xhr-upload": "^3.3.2",

Goal

I would like to use DropTarget and FileInput components to build up my own "choose file" button and a dropzone too. This is a TS project.

I did find this question being asked on your forums, but it had no replies. This lead me to delve into the source and find that the @uppy/vue src/index.js was missing an export for FileInput.

I was using the DragDrop component but this provides a single button element wrapping all other HTML markup. I am wary this will not be accessible with the Dragon accessibility program i.e. the button text describes multiple actions - "Drag here AND browse". There is no way to split out this text into separate elements in the HTML.

Is there a recommended way to achieve this very minimal and custom UI? Or would I need to create my own functionality similar to what the FileInput plugin currently does e.g. build up my own input type="file" and handle the @change event. Then use the uppy addFiles method. Allowing the DropTarget to still work and both working from the same uppy state.

The link on your README GitHub 404s for the file-input plugin.

Expected behavior

Access to the library component

Actual behavior

[Vue warn]: Unknown custom element: <FileInput>

[Murderlon]

Hi, would you be willing to make a PR to fix this?

[mdxiaohu]

@Murderlon

#4736
Created one, I wonder if this is okay.
I directly made changes to the file online, but I couldn't connect to Github locally due to network blocking .

[mdxiaohu]

@Dawdre

I submitted a PR, but I don't know how long it will take to merge .
To solve this problem, it can also be done locally .

/node_modules/@uppy/vue/lib/index.js

Add Code

export { default as FileInput } from './file-input.js';

This is a temporary plan .

[Murderlon]

Closed in #4736

[mdxiaohu]

Closed in #4736 #4736 关闭

Thank you very much .