title | type | module | permalink | alias | order | category |
---|---|---|---|---|---|---|
<FileInput /> |
docs |
@uppy/react |
docs/react/file-input/ |
docs/react/fileinput/ |
4 |
React |
The <FileInput />
component wraps the @uppy/file-input
plugin.
Install from NPM:
npm install @uppy/react @uppy/file-input @uppy/core
import { FileInput } from '@uppy/react'
// Alternatively, you can also use a default import:
// import FileInput from '@uppy/react/lib/FileInput';
The FileInput
component includes some basic styles. You can also choose not to use it and provide your own styles instead:
import '@uppy/core/dist/style.css'
import '@uppy/file-input/dist/style.css'
Import general Core styles from @uppy/core/dist/style.css
first, then add the Drag & Drop styles from @uppy/file-input/dist/style.css
. A minified version is also available as style.min.css
at the same path. The way to do import depends on your build system.
The <FileInput />
component supports all FileInput options as props. Additionally, an Uppy instance must be provided in the uppy={}
prop: see Initializing Uppy for details.
import React from 'react'
import { FileInput } from '@uppy/react'
export default function MyComponent (props) {
const { uppy } = props
return (
<FileInput
// assuming `props.uppy` contains an Uppy instance:
uppy={uppy}
pretty
inputName="files[]"
/>
)
}