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" />; }

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 />; }

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