@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
string
id: This is a unique identifier for this component.
string
className: Classes that will be applied to the upper-most div on the component.
boolean
multiple: 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.
Function
upload: Function that performs the file upload.
string
uploadCaption (optional, default = "Upload"): Caption on the upload button.
Function
uploadComplete (optional, default = null): 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.
boolean
smallInputs (optional, default = false): 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)
boolean
isUploadVisible (optional, default = true): If this is true
, the upload button will be visible.
If this is false
, the upload button will be hidden.
boolean
isAutoUpload: 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.
string
label: The text for the label on the upload component.
boolean
isRequired: If set to true
, a red required star will appear on the component.
string
validationMessage: A message to help users input correct information, only shown when there are no errors.
boolean
isVisible: Whether the entire component is visible or not.
boolean
isValid: If this component should highlight red to represent a validation error.
string
hintValue (optional, default = "Drag 'n' drop some files here, or click to select files"): A basic string of text to be shown on the drop zone to prompt users to interact with the drop zone.
string
helpInfo: A permanent help message shown at the bottom of the component.
boolean
disabled: If the component is set to being disabled, then dropping files onto the drop zone and clicking the upload button will not function.