uppy/website/src/docs/react-fileinput.md

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.

Installation

Install from NPM:

npm install @uppy/react

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 simple 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'

  <FileInput
    // assuming `this.uppy` contains an Uppy instance:
    uppy={this.uppy}
    pretty
    inputName="files[]"
  />