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.

Props

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: file: Selected file. error: Error of the file. If it is defined, it will be shown and the file item will be mark as invalid. preview: Preview of the file.	-
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.	-

Examples

Basic usage

() => {
  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 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>
  );
}

Error handling

() => {
  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 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>
  );
}

Inside a form

() => {
  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>
  );
}

() => {
  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>
  );
}

Props
Examples

Edit this page on GitHub

Report an issue on GitHub

Dropdown