| Name | Type | Description | Default |
|---|---|---|---|
| accept | string | The file types that the component accepts. Its value must be one of all the possible values of the HTML file input's accept attribute. Please check the documentation here. | - |
| buttonLabel | string | Text to be placed inside the button. | - |
Required callbackFile | (val: {files: { file: File, error?: string, preview?: string }[], error?: string}) => void | 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. | - |
| disabled | boolean | If true, the component will be disabled. | false |
| dropAreaLabel | string | Text to be placed inside the drag and drop zone alongside the button. | - |
| helperText | string | Helper text to be placed above the component. | - |
| label | string | Text to be placed above the component. | - |
| margin | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin | 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. | - |
| maxSize | number | The maximum file size (in bytes) allowed. If the size of the file does not comply this value, the file will have an error. | - |
| minSize | number | The minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file will have an error. | - |
| mode | 'file' | 'filedrop' | 'dropzone' | Available modes of the component. | 'file' |
| multiple | boolean | If true, the component allows multiple file items and will show all of them. If false, only one file will be shown, and if there is already one file selected and a new one is chosen, it will be replaced by the new selected one. | true |
New optional | boolean | If true, the input will be optional, showing '(Optional)' next to the label. | false |
| ref | React.Ref<HTMLDivElement> | Reference to the component. | - |
| showPreview | boolean | 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. | false |
New size | 'medium' | 'fillParent' | Size of the component. | 'medium' |
| tabIndex | number | Value of the tabindex attribute. | 0 |
Required value | { file: File, error?: string, preview?: string }[] | An array of files representing the selected files. Each file has the following properties:
| - |
() => { const [files, setFiles] = useState([]); const handleSubmit = () => { console.log(files.map((file) => file.file.name)); }; const callbackFile = (files) => { setFiles(files); }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex direction="column" gap="var(--spacing-gap-xl)"> <DxcFileInput label="Select your files" value={files} callbackFile={callbackFile} /> <DxcButton label="Submit" type="submit" onClick={handleSubmit} /> </DxcFlex> </DxcInset> ); }
() => { const [files, setFiles] = useState([]); const callbackFile = (files) => { const updatedFiles = files.map((file) => { if (file.error) return { ...file, error: "Please select a file with valid size." }; return { ...file }; }); setFiles(updatedFiles); }; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcFileInput label="Select your files" value={files} callbackFile={callbackFile} minSize={100000} maxSize={200000} /> </DxcInset> ); }
() => { const [files, setFiles] = useState([]); const handleSubmit = (event) => { event.preventDefault(); console.log(files.map((file) => file.file.name)); }; const callbackFile = (files) => { setFiles(files); }; return ( <form onSubmit={handleSubmit}> <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex direction="column" gap="var(--spacing-gap-xl)"> <DxcFileInput label="Select your files" value={files} callbackFile={callbackFile} /> <DxcButton type="submit" label="Submit" /> </DxcFlex> </DxcInset> </form> ); }