# Component/Upload/ImageUploadButton

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

## Examples


### Accept Array Extensions

쉼표로 구분된 여러 이미지 확장자를 허용합니다. PNG, JPG, GIF 파일을 업로드할 수 있습니다.

```tsx
{
  render: args => {
    return <ImageUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    accept: 'png, jpg, gif'
  },
  parameters: {
    docs: {
      description: {
        story: '쉼표로 구분된 여러 이미지 확장자를 허용합니다. PNG, JPG, GIF 파일을 업로드할 수 있습니다.'
      }
    }
  }
}
```

### Accept Case Insensitive

**자동 정규화**: 대소문자가 혼합된 확장자를 자동으로 소문자로 변환하고 MIME 타입으로 정규화합니다.

```tsx
{
  render: args => {
    return <ImageUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    accept: 'PNG, JPG, GIF'
  },
  parameters: {
    docs: {
      description: {
        story: '**자동 정규화**: 대소문자가 혼합된 확장자를 자동으로 소문자로 변환하고 MIME 타입으로 정규화합니다.'
      }
    }
  }
}
```

### Accept Mixed Format

**혼합 형식 지원**: 확장자와 MIME 타입이 혼합된 입력을 자동으로 정규화합니다.

```tsx
{
  render: args => {
    return <ImageUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    accept: 'png,image/jpg,gif'
  },
  parameters: {
    docs: {
      description: {
        story: '**혼합 형식 지원**: 확장자와 MIME 타입이 혼합된 입력을 자동으로 정규화합니다.'
      }
    }
  }
}
```

### Accept Single Array

단일 이미지 확장자를 허용합니다. PNG 파일만 업로드 가능합니다.

```tsx
{
  render: args => {
    return <ImageUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    accept: 'png'
  },
  parameters: {
    docs: {
      description: {
        story: '단일 이미지 확장자를 허용합니다. PNG 파일만 업로드 가능합니다.'
      }
    }
  }
}
```

### Accept Wildcard

기본값으로 모든 이미지 타입을 허용합니다.

```tsx
{
  render: args => {
    return <ImageUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    accept: '*'
  },
  parameters: {
    docs: {
      description: {
        story: '기본값으로 모든 이미지 타입을 허용합니다.'
      }
    }
  }
}
```

### Accept With Invalid Extensions

**자동 필터링**: 잘못된 확장자는 자동으로 필터링되고, 유효한 확장자만 MIME 타입으로 변환됩니다.

```tsx
{
  render: args => {
    return <ImageUploadButton {...args} onFileUpload={(file: File | File[]) => console.log('onFileUpload:', file)} />;
  },
  args: {
    accept: 'png,invalid,jpg,webp,unknown'
  },
  parameters: {
    docs: {
      description: {
        story: '**자동 필터링**: 잘못된 확장자는 자동으로 필터링되고, 유효한 확장자만 MIME 타입으로 변환됩니다.'
      }
    }
  }
}
```

### Base

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

### Custom Border Radius

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

### Custom Size

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

### Disabled

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

### Loading

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

### Multiple Files

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

### Read Only

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

### Small Size

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