mirror of
https://github.com/lingble/twenty.git
synced 2025-10-30 20:27:55 +00:00
a5989a470c
* Begin docs improvement * Keep improving documentation * Upgrade Docusarus * Fix broken links
92 lines
1.9 KiB
Plaintext
92 lines
1.9 KiB
Plaintext
---
|
|
title: Image Input
|
|
sidebar_position: 6
|
|
sidebar_custom_props:
|
|
icon: TbUpload
|
|
---
|
|
|
|
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'
|
|
|
|
Allows users to upload and remove an image.
|
|
|
|
<Tabs>
|
|
<TabItem value="usage" label="Usage" default>
|
|
|
|
<SandpackEditor
|
|
availableComponentPaths={['@/ui/input/components/ImageInput']}
|
|
componentCode={imageInputCode}
|
|
/>
|
|
|
|
</TabItem>
|
|
|
|
<TabItem value="props" label="Props">
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Props</th>
|
|
<th>Type</th>
|
|
<th>Description</th>
|
|
<th>Default</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td>picture</td>
|
|
<td>string</td>
|
|
<td>The image source URL</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onUpload</td>
|
|
<td>function</td>
|
|
<td>The function called when a user uploads a new image. It receives the `File` object as a parameter</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onRemove</td>
|
|
<td>function</td>
|
|
<td>The function called when the user clicks on the remove button</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>onAbort</td>
|
|
<td>function</td>
|
|
<td>The function called when a user clicks on the abort button during image upload</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>isUploading</td>
|
|
<td>boolean</td>
|
|
<td>Indicates whether an image is currently being uploaded</td>
|
|
<td>`false`</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>errorMessage</td>
|
|
<td>string</td>
|
|
<td>An optional error message to display below the image input</td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>If `true`, the entire input is disabled, and the buttons are not clickable</td>
|
|
<td>`false`</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
|
|
</TabItem>
|
|
|
|
</Tabs> |