# Component/Upload/FileUploadButton

> Props: component-upload-fileuploadbutton.props.txt

## Examples


### Base

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  }
}
```

### Change Button Icon

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    buttonProps: {
      startIcon: <IconArrowDirectionDown />,
      endIcon: <IconArrowDirectionUp />
    }
  }
}
```

### Change Button Kind

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    buttonProps: {
      kind: 'primary'
    }
  }
}
```

### Change Button Size

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    buttonProps: {
      size: 'large'
    }
  }
}
```

### Change Filled Button

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    buttonProps: {
      fill: true
    }
  }
}
```

### Disabled

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    disabled: true
  }
}
```

### Loading

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    loading: true
  }
}
```

### Multiple

```tsx
{
  render: args => {
    return <FileUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    multiple: true
  }
}
```