feat: adding format file by props to upload input

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- New prop `accept` to `form-input.upload`.
+
 ## [0.5.1] - 2021-03-17
 ### Fixed
 - Change `form-input.upload` to render only on client since it breaks SSR.

docs/README.md

@@ -170,6 +170,13 @@ In the example below, the form block is contained in a Flex Layout row:
 | `pointer`  | `string` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) JSON schema pointer i.e. the JSON schema path  (for example: #/properties/address) in which the form block inputs should be validated against. Note that since you are configuring a `form-field-group` block, the path must not include a schema's sub-property, only a schema's property. | `undefined`     |
 | `uiSchema` | `object` | Redefines how the `form-field-groups` block should render each sub-properties declared in the JSON schema path defined in `pointer`. As said previously, the `form-field-groups` already does that by itself, but you can overwrite the sub-properties types through a schema and so redefine how each form block will be rendered. | `undefined`   |
 
+### `form-input.upload` props
+
+| Prop name  | Type | Description                                                                                                                                                                                                                                                                                                           | Default Value |
+| ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
+| `pointer`  | `string` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) JSON schema pointer i.e. the JSON schema path  (for example: #/properties/address) in which the form block inputs should be validated against. Note that since you are configuring a `form-field-group` block, the path must not include a schema's sub-property, only a schema's property. | `undefined`     |
+| `accept` | `string` | ![https://img.shields.io/badge/-optional-yellow](https://img.shields.io/badge/-optional-yellow) By default the upload input just accept image and PDF format files. If you want to customize it, you can pass the format type that you want following this pattern: `*.TYPEFILE`. You can [read more about the `accept` field](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
+
 - **`uiSchema` object:**
 
 ```js

react/components/Upload/Upload.tsx

@@ -42,7 +42,7 @@ const messages = defineMessages({
   },
 })
 
-const InputUpload = (props: FormRawInputProps) => {
+const InputUpload = (props: FormRawInputProps & { accept?: string }) => {
   const intl = useIntl()
   const [uploadFile] = useMutation<MutationData>(UploadFileMutation)
   const ref = React.useRef<HTMLDivElement>(null)
@@ -52,7 +52,7 @@ const InputUpload = (props: FormRawInputProps) => {
   const [imageUrl, setImageUrl] = React.useState<string | undefined>()
   const [error, setError] = React.useState<string | null>()
 
-  const { inputType = InputTypes.input, pointer, ...rest } = props
+  const { inputType = InputTypes.input, accept, pointer, ...rest } = props
 
   const onDropImage = async (files: File[]) => {
     setError(null)
@@ -95,7 +95,7 @@ const InputUpload = (props: FormRawInputProps) => {
   }
 
   const { getInputProps, getRootProps } = useDropzone({
-    accept: '.pdf, image/*',
+    accept: accept ?? '.pdf, image/*',
     maxSize: MAX_SIZE,
     multiple: false,
     onDrop: onDropImage,