Skip to main content

FileInput

File Input for selecting and uploading files.

The onChange handler for this component returns the native event and not the file.

Result
Loading...
Live Editor
function Example() {
  const handleChange = (payload) => {
    console.log('payload', payload);
  };

  return <FileInput id="demo-component" onChange={handleChange} label="File Picker" />;
}

Multiple files​

Add the multiple prop to the component to allow users to select multiple files.

Result
Loading...
Live Editor
function Example() {
  const handleChange = (payload) => {
    console.log('payload', payload);
  };

  return <FileInput id="demo-component-2" onChange={handleChange} label="File Picker" multiple />;
}

Analytics​

The FileInput component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'FileInput',
	actions: {
		onChange: { type: 'FILEINPUT_CHANGE', payload: 'Change' },
	},
};

Props​