---
title: Image Input
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import imageInputCode from '!!raw-loader!@site/src/ui/input/components/imageInputCode.js'

Cho phép người dùng tải lên và xóa hình ảnh.

<Tabs>
<Tab title="Usage">

```jsx
import { ImageInput } from "@/ui/input/components/ImageInput";

export const MyComponent = () => {
  return <ImageInput/>;
};
```

</Tab>
<Tab title="Props">

| Thuộc Tính   | Loại    | Mô tả                                                                                                      |
| ------------ | ------- | ---------------------------------------------------------------------------------------------------------- |
| hình ảnh     | string  | Nguồn URL của hình ảnh                                                                                     |
| khiTảiLên    | hàm     | Hàm được gọi khi người dùng tải lên một hình ảnh mới. Nó nhận đối tượng `File` làm tham số |
| khiXóa       | hàm     | Hàm được gọi khi người dùng nhấn nút xóa                                                                   |
| khiHủy       | hàm     | Hàm được gọi khi người dùng nhấn nút hủy trong quá trình tải hình ảnh                                      |
| đangTảiLên   | boolean | Chỉ định liệu một hình ảnh có đang được tải lên hay không                                                  |
| thôngĐiệpLỗi | string  | Một thông điệp lỗi tùy chọn để hiển thị dưới trường nhập ảnh                                               |
| vô hiệu hóa  | boolean | Nếu `true`, toàn bộ trường nhập bị vô hiệu hóa và các nút không thể nhấn                                   |

</Tab>
</Tabs>