feat(InputFile): add multiple attribute (#3918)

kiwicom · Jul 11, 2023 · 9119426 · 9119426
1 parent 60e6665
commit 9119426
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 1 deletion.
diff --git a/packages/orbit-components/src/InputFile/InputFile.stories.tsx b/packages/orbit-components/src/InputFile/InputFile.stories.tsx
@@ -107,6 +107,7 @@ WithError.story = {
 
 export const Playground = () => {
   const label = text("Label", "Label");
+  const multiple = boolean("multiple", false);
   const buttonLabel = text("buttonLabel", "Please select file");
   const name = text("Name", "fileInput");
   const placeholder = text("Placeholder", "No file has been selected yet");
@@ -122,6 +123,7 @@ export const Playground = () => {
   return (
     <InputFile
       label={label}
+      multiple={multiple}
       buttonLabel={buttonLabel}
       name={name}
       placeholder={placeholder}

diff --git a/packages/orbit-components/src/InputFile/README.md b/packages/orbit-components/src/InputFile/README.md
@@ -39,6 +39,7 @@ Table below contains all types of the props available in the InputFile component
 | width            | `string`                   | `100%`               | Specifies width of InputFile                                                                                                                                   |
 | helpClosable     | `boolean`                  | `true`               | Whether to display help as a closable tooltip, or have it open only while the field is focused, same as error.                                                 |
 | insideInputGroup | `boolean`                  | `false`              | Set to `true` if InputFile is inside InputGroup                                                                                                                |
+| multiple         | `boolean`                  |                      | If set to `true` will allow to upload multiple files                                                                                                           |
 
 ## Functional specs
 

diff --git a/packages/orbit-components/src/InputFile/__tests__/index.test.tsx b/packages/orbit-components/src/InputFile/__tests__/index.test.tsx
@@ -17,12 +17,13 @@ describe("InputFile", () => {
     const onFocus = jest.fn();
     const tabIndex = "-1";
     const spaceAfter = SPACINGS_AFTER.NORMAL;
-    const file = new File(["blin"], "blin.png", { type: "image/png" });
+    // const file = new File(["blin"], "blin.png", { type: "image/png" });
 
     render(
       <InputFile
         name={name}
         label={label}
+        multiple
         buttonLabel={buttonLabel}
         placeholder={placeholder}
         dataTest={dataTest}
@@ -40,6 +41,7 @@ describe("InputFile", () => {
 
     const input = screen.getByTestId(dataTest);
     expect(input).toHaveAttribute("name", name);
+    expect(input).toHaveAttribute("multiple");
     expect(input).toHaveAttribute("tabindex", "-1");
     expect(input).toHaveAttribute("accept", ".png,.jpg,.pdf");
 

diff --git a/packages/orbit-components/src/InputFile/index.js.flow b/packages/orbit-components/src/InputFile/index.js.flow
@@ -27,6 +27,7 @@ export type Props = {|
   +onFocus?: (ev: SyntheticInputEvent<HTMLInputElement>) => void | Promise<any>,
   +onBlur?: (ev: SyntheticInputEvent<HTMLInputElement>) => void | Promise<any>,
   +onRemoveFile?: () => void | Promise<any>,
+  +multiple?: boolean,
   ref?: Ref,
 |};
 

diff --git a/packages/orbit-components/src/InputFile/index.tsx b/packages/orbit-components/src/InputFile/index.tsx
@@ -120,6 +120,7 @@ const InputFile = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
     onBlur,
     name,
     label,
+    multiple,
     onChange,
     allowedFileTypes,
     tabIndex,
@@ -157,6 +158,7 @@ const InputFile = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
         data-test={dataTest}
         id={id}
         aria-required={required}
+        multiple={multiple}
         data-state={
           insideInputGroup && typeof error === "undefined"
             ? undefined

diff --git a/packages/orbit-components/src/InputFile/types.d.ts b/packages/orbit-components/src/InputFile/types.d.ts
@@ -23,4 +23,5 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly onBlur?: React.FocusEventHandler<HTMLInputElement>;
   readonly insideInputGroup?: boolean;
   readonly onRemoveFile?: Common.Callback;
+  readonly multiple?: boolean;
 }