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.

Code

Usage

Specifications

Props

Name	Default	Description
name: string		Name attribute.
mode: 'file' \| 'filedrop' \| 'dropzone'	`'file'`	Available modes of the component.
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 the minSize, the file will have an error.
maxSize: number		The maximum file size (in bytes) allowed. If the size of the file does not comply the maxSize, the file will have an error.
multiple: boolean	`true`	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.
value: object[]		An array of files representing the selected files. Each file has the following properties: file: File: Selected file. error: string: Error of the file. If it is defined, it will be shown and the file item will be mark as invalid. preview: string: Preview of the file.
showPreview: boolean	`false`	If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
disabled: boolean	`false`	If true, the component will be disabled.
callbackFile: function		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: string \| object		Size of the margin to be applied to the component ('xxsmall' \| 'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
tabIndex: number	`0`	Value of the tabindex.
ref: object		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

Dropdown