FileUpload

File upload component

() => {
  const handleUpload = (value) => {
    console.log(value);
  };

  return (
    <FileUpload onChange={handleUpload} supportedExtensions={['jpg', 'png']} />
  );
};

Props

Prop	Type	Default	Description
onChange	(FileList) => void		A function triggered when an item is selected. The single parameter will always be a FileList (an array) even when `multiple` is true.
supportedExtensions	string[]		Allowed extension types.
data-testid	string \| undefined		data-testid added to the root element and added to the file input as `${testid}:input`
variant	'sm' \| 'md'	sm	Small or medium version of the component.
sampleFileText	string \| undefined		Text shown for the 'sample' button.
onSampleFileClick	() => void		Click event when the sample file text is clicked.
multiple	boolean \| undefined	false	Whether or not more than 1 file can be uploaded at once.
onError	(ErrorType) => void		Event triggered when there is an error, ErrorType = 'invalid-extension' \| 'multiple-files'.
error	boolean \| undefined		Display a red border & red helper text when true.
helperText	string \| undefined		Text shown below the field.

Examples

Basic

() => {
  const handleUpload = (value) => {
    console.log(value);
  };
  const handleClick = () => {
    console.log('clicked');
  };
  const handleError = (type) => {
    console.error('type: ', type);
  }

  return (
    <FileUpload 
      onChange={handleUpload} 
      supportedExtensions={['jpg', 'png']} 
      data-testid="foobar" 
      variant="md"
      sampleFileText="Download sample file"
      onSampleFileClick={handleClick}
      onError={handleError}
    />
  );
};