@boomi/react-file-upload v0.4.0
@boomi/react-file-upload
A generic yet configurable react component for a functioning file upload.
Getting Started
Installation
npm install --save @boomi/react-file-upload
Usage
import FileUpload from '@boomi/react-file-upload';
Minimum required setup
<FileUpload />
Contributing
To contribute to this project you can submit a pull request.
Local development setup
- Clone this repository
npm install
npm link
npm start
Then inside your own local project:
npm link @boomi/react-file-upload
- And follow usage instructions described above
Running Jest tests
npm run test
Component props
id: string
This is a unique identifier for this component.
className: string
Classes that will be applied to the upper-most div on the component.
multiple: boolean
This file upload component can accept single or multiple file uploads.
If multiple is true
, then multiple files will be able to be uploaded at a time.
If multiple is false
, then only one file can be uploaded at a time.
upload: Function
Function that performs the file upload.
uploadCaption (optional, default = "Upload"): string
Caption on the upload button.
uploadComplete (optional, default = null): Function
Function to be called when an upload is completed. This function is given the response from a successful upload made using the provided upload function.
smallInputs (optional, default = false): boolean
If this is set to true
, then the upload button will be given a css class to render as a bootstrap small button.
(NOTE: this component doesn't come with bootstrap, you will have to set it up manually)
isUploadVisible (optional, default = true): boolean
If this is true
, the upload button will be visible.
If this is false
, the upload button will be hidden.
isAutoUpload: boolean
If the file/s should be instantly uploaded after they are selected.
If set to false
, then an "Upload" button is needed to be pressed to confirm upload.
label: string
The text for the label on the upload component.
isRequired: boolean
If set to true
, a red required star will appear on the component.
validationMessage: string
A message to help users input correct information, only shown when there are no errors.
isVisible: boolean
Whether the entire component is visible or not.
isValid: boolean
If this component should highlight red to represent a validation error.
hintValue (optional, default = "Drag 'n' drop some files here, or click to select files"): string
A basic string of text to be shown on the drop zone to prompt users to interact with the drop zone.
helpInfo: string
A permanent help message shown at the bottom of the component.
disabled: boolean
If the component is set to being disabled, then dropping files onto the drop zone and clicking the upload button will not function.