Import the component and when using add an onUpload handler that accepts a list of files.

- If you want a link to upload a file pass an `inputId` and a label with a matching `htmlFor`.
- You can restrict the file type uploadable by passing an `accept` property. It can be a single type or an array of types.
- `onUpload` function is used to return back a list of File objects that were succesfully accepted byt the uploaded. If any of your files were rejected due to invalid extension then they will be avaialble in `onDropRejected` function.
- `maxFiles` Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted.
- `multipleFileSelection` Allow drag 'n' drop (or selection from the file dialog) of multiple files.
- `validator` The value must be a function that accepts File object and returns null if file should be accepted or error object/array of error objects if file should be rejected.



```js
import { UploadArea } from 'frontend-react-components';
const maxLength = 20;
function nameLengthValidator(file) {
  if (file.name.length > maxLength) {
    return {
      code: "name-too-large",
      message: `Name is larger than ${maxLength} characters`
    };
  }

  return null
}
<UploadArea
  onUpload={(acceptedFiles) => { console.log('accepted==', acceptedFiles); }}
  onDropRejected={(fileRejections) => { console.log('reject==', fileRejections); }}
  inputId="browser-upload"
  accept="audio/*"
  validator={(files) => nameLengthValidator(files)}

>
  <div>
    Hi there! You can drag and drop your file in this area. <br />
  </div>
  <button type="button" >
    <label htmlFor="browser-upload">
      Or Click on this browse button
    </label>
  </button>
</UploadArea>
```