Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
Miscellaneous
React
- Introduction
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
<FileInput />
The <FileInput />
component wraps the @uppy/file-input
plugin.
Installation
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'; |
CSS
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.
Props
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[]" /> ) } |
Caught a mistake or want to contribute to the documentation?
Edit/fork this page directly on Github!