Skip to content

Add optional prop to the File Input component #2273

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 26, 2025
Merged

Add optional prop to the File Input component #2273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
320a796
Add optional prop to the File Input component
Aug 19, 2025
f3d17cd
Sort props on types.ts and add documentation for optional props
Aug 19, 2025
dd2914b
Add updated documentation page
Aug 20, 2025
40f87d5
Remove input error from the component
PelayoFelgueroso Aug 21, 2025
d91358d
Remove unnecesary function from utils.ts and its import on the component
PelayoFelgueroso Aug 21, 2025
7769e0a
Add new tag and fix types.ts
PelayoFelgueroso Aug 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 85 additions & 68 deletions apps/website/screens/components/file-input/code/FileInputCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,31 +24,54 @@ const sections = [
</thead>
<tbody>
<tr>
<td>mode</td>
<td>accept</td>
<td>
<TableCode>'file' | 'filedrop' | 'dropzone'</TableCode>
<TableCode>string</TableCode>
</td>
<td>Available modes of the component.</td>
<td>
<TableCode>'file'</TableCode>
The file types that the component accepts. Its value must be one of all the possible values of the HTML
file input's <Code>accept</Code> attribute. Please check the documentation{" "}
<DxcLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">here</DxcLink>.
</td>
<td>-</td>
</tr>
<tr>
<td>label</td>
<td>buttonLabel</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Text to be placed above the component.</td>
<td>Text to be placed inside the button.</td>
<td>-</td>
</tr>
<tr>
<td>buttonLabel</td>
<td>
<TableCode>string</TableCode>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
callbackFile
</DxcFlex>
</td>
<td>
<TableCode>
{"(val: {files: { file: File, error?: string, preview?: string }[], error?: string}) => void"}
</TableCode>
</td>
<td>
This function will be called when the user adds or deletes a file. That is, when the file input's inner
value is modified. The list of files will be sent as a parameter. In this function, the files can be
updated or returned as they come. These files must be passed to the value in order to be shown.
</td>
<td>Text to be placed inside the button.</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>dropAreaLabel</td>
<td>
Expand All @@ -66,25 +89,21 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>accept</td>
<td>label</td>
<td>
<TableCode>string</TableCode>
</td>
<td>
The file types that the component accepts. Its value must be one of all the possible values of the HTML
file input's <Code>accept</Code> attribute. Please check the documentation{" "}
<DxcLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">here</DxcLink>.
</td>
<td>Text to be placed above the component.</td>
<td>-</td>
</tr>
<tr>
<td>minSize</td>
<td>margin</td>
<td>
<TableCode>number</TableCode>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
</td>
<td>
The minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file
will have an error.
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
</td>
<td>-</td>
</tr>
Expand All @@ -100,43 +119,24 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>minSize</td>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
value
</DxcFlex>
</td>
<td>
<TableCode>{"{ file: File, error?: string, preview?: string }[]"}</TableCode>
<TableCode>number</TableCode>
</td>
<td>
An array of files representing the selected files. Each file has the following properties:
<ul>
<li>
<b>file</b>: Selected file.
</li>
<li>
<b>error</b>: Error of the file. If it is defined, it will be shown and the file item will be mark as
invalid.
</li>
<li>
<b>preview</b>: Preview of the file.
</li>
</ul>
The minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file
will have an error.
</td>
<td>-</td>
</tr>
<tr>
<td>showPreview</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>mode</td>
<td>
If true, if the file is an image, a preview of it will be shown. If not, an icon referring to the file
type will be shown.
<TableCode>'file' | 'filedrop' | 'dropzone'</TableCode>
</td>
<td>Available modes of the component.</td>
<td>
<TableCode>false</TableCode>
<TableCode>'file'</TableCode>
</td>
</tr>
<tr>
Expand All @@ -154,42 +154,40 @@ const sections = [
</td>
</tr>
<tr>
<td>disabled</td>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="new" />
optional
</DxcFlex>
</td>
<td>
<TableCode>boolean</TableCode>
</td>
<td>If true, the component will be disabled.</td>
<td>If true, the input will be optional, showing '(Optional)' next to the label.</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>ref</td>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
callbackFile
</DxcFlex>
</td>
<td>
<TableCode>{"(files: { file: File, error?: string, preview?: string }[]) => void"}</TableCode>
</td>
<td>
This function will be called when the user adds or deletes a file. That is, when the file input's inner
value is modified. The list of files will be sent as a parameter. In this function, the files can be
updated or returned as they come. These files must be passed to the value in order to be shown.
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
<tr>
<td>margin</td>
<td>showPreview</td>
<td>
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
<TableCode>boolean</TableCode>
</td>
<td>
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
'right' properties in order to specify different margin sizes.
If true, if the file is an image, a preview of it will be shown. If not, an icon referring to the file
type will be shown.
</td>
<td>
<TableCode>false</TableCode>
</td>
<td>-</td>
</tr>
<tr>
<td>tabIndex</td>
Expand All @@ -204,11 +202,30 @@ const sections = [
</td>
</tr>
<tr>
<td>ref</td>
<td>
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
value
</DxcFlex>
</td>
<td>
<TableCode>{"{ file: File, error?: string, preview?: string }[]"}</TableCode>
</td>
<td>
An array of files representing the selected files. Each file has the following properties:
<ul>
<li>
<b>file</b>: Selected file.
</li>
<li>
<b>error</b>: Error of the file. If it is defined, it will be shown and the file item will be mark as
invalid.
</li>
<li>
<b>preview</b>: Preview of the file.
</li>
</ul>
</td>
<td>Reference to the component.</td>
<td>-</td>
</tr>
</tbody>
Expand Down
5 changes: 4 additions & 1 deletion packages/lib/src/file-input/FileInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Meta, StoryObj } from "@storybook/react";
import ExampleContainer from "../../.storybook/components/ExampleContainer";
import Title from "../../.storybook/components/Title";
import DxcFileInput from "./FileInput";
import { userEvent, within } from "@storybook/test";

export default {
title: "File Input",
Expand Down Expand Up @@ -81,6 +80,10 @@ const FileInput = () => (
<Title title="With label" theme="light" level={4} />
<DxcFileInput label="File input" value={[]} callbackFile={() => {}} />
</ExampleContainer>
<ExampleContainer>
<Title title="Optional" theme="light" level={4} />
<DxcFileInput label="File input" value={[]} callbackFile={() => {}} optional />
</ExampleContainer>
<ExampleContainer>
<Title title="With label and helper text" theme="light" level={4} />
<DxcFileInput label="File input" helperText="Please select files" value={[]} callbackFile={() => {}} />
Expand Down
15 changes: 10 additions & 5 deletions packages/lib/src/file-input/FileInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
(
{
mode = "file",
label = "",
label,
buttonLabel,
dropAreaLabel,
helperText = "",
Expand All @@ -119,6 +119,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
value,
margin,
tabIndex = 0,
optional = false,
},
ref
): JSX.Element => {
Expand Down Expand Up @@ -226,10 +227,12 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(

return (
<FileInputContainer margin={margin} ref={ref}>
<Label htmlFor={fileInputId} disabled={disabled}>
{label}
</Label>
<HelperText disabled={disabled}>{helperText}</HelperText>
{label && (
<Label disabled={disabled} hasMargin={!helperText} htmlFor={fileInputId}>
{label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>}
</Label>
)}
{helperText && <HelperText disabled={disabled}>{helperText}</HelperText>}
{mode === "file" ? (
<FileContainer singleFileMode={!multiple && files.length === 1}>
<ValueInput
Expand All @@ -240,6 +243,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
onChange={selectFiles}
disabled={disabled}
readOnly
required={!optional}
/>
<DxcButton
mode="secondary"
Expand Down Expand Up @@ -282,6 +286,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
onChange={selectFiles}
disabled={disabled}
readOnly
required={!optional}
/>
<DragDropArea
isDragging={isDragging}
Expand Down
Loading