feat: adding format file by props to upload input

vtex-apps · Mar 23, 2021 · 8ef259c · 8ef259c
1 parent 46b0900
commit 8ef259c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/docs/README.md b/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`     |
+| `typeAceppt` | `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 also pass multiple format types if you want: `*.TYPEFILE1, *.TYPEFILE2`
+
 - **`uiSchema` object:**
 
 ```js

diff --git a/react/components/Upload/Upload.tsx b/react/components/Upload/Upload.tsx
@@ -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, typeAccept, 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: typeAccept ?? '.pdf, image/*',
     maxSize: MAX_SIZE,
     multiple: false,
     onDrop: onDropImage,

diff --git a/react/typings/InputProps.ts b/react/typings/InputProps.ts
@@ -19,4 +19,5 @@ export enum InputTypes {
 export interface FormRawInputProps extends BaseInputProps {
   inputType?: InputTypes
   value?: string
+  typeAccept?: string
 }