File Input
The file input component is used to choose files from any location in the local machine and update those files to the server where the application is hosted. It is a common procedure in applications where files are required, like documents, images, or other information in digital formats.
| Name | Type | Description | Default |
|---|---|---|---|
| mode | 'file' | 'filedrop' | 'dropzone' | Available modes of the component. | 'file' |
| label | string | Text to be placed above the component. | - |
| buttonLabel | string | Text to be placed inside the button. | - |
| 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. | - |
| 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. | - |
| 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. | - |
| 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. | - |
Required value | { file: File, error?: string, preview?: string }[] | An array of files representing the selected files. Each file has the following properties:
| - |
| 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 |
| 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 |
| disabled | boolean | If true, the component will be disabled. | false |
Required callbackFile | (files: { file: File, error?: string, preview?: 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. | - |
| 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. | - |
| tabIndex | number | Value of the tabindex attribute. | 0 |
| ref | React.Ref<HTMLDivElement> | Reference to the component. | - |
() => { const [files, setFiles] = useState([]); const handleSubmit = () => { console.log(files.map((file) => file.file.name)); }; const callbackFile = (files) => { setFiles(files); }; return ( <DxcInset space="2rem"> <DxcFlex direction="column" gap="2rem"> <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="2rem"> <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="2rem"> <DxcFlex direction="column" gap="2rem"> <DxcFileInput label="Select your files" value={files} callbackFile={callbackFile} /> <DxcButton type="submit" label="Submit" /> </DxcFlex> </DxcInset> </form> ); }