Attachment
Add any type of attachment or attachments with preview. Click logo or picture to preview.
Example
Add attachment with preview.
<>
<Attachment attachment={{
name:"text.docx",
type:"text",
url:"/Documents/test.docx"}}
/>
</>
Size
Add file size by adding size prop to attachment information array.
<>
<Attachment attachment={{
name:"text.docx",
type:"text",
url:"/Documents/test.docx",
size:4179}}
/>
</>
Additional item
Add additional content under the title by additionalItem prop.
<>
<Attachment attachment={{
name:"text.docx",
type:"text",
url:"/Documents/test.docx"}}
additionalItem="Additional text" />
</>
Image
Click on picture to see preview.
<>
<Attachment attachment={{
name:"logo_dark.svg",
type:"image",
url:"https://erxes.io/static/images/logo/logo_dark.svg"}}
/>
</>
Use simple to show only image preview.
<>
<Attachment attachment={{
name:"logo_dark.svg",
type:"image",
url:"https://erxes.io/static/images/logo/logo_dark.svg"}}
simple={true} />
</>
Video
Click on video to preview.
<>
<Attachment attachment={{
name:"video.mp4",
type:"video",
url:"/Documents/video.mp4"}}
/>
</>
Audio
Click on Audio to preview.
<>
<Attachment attachment={{
name:"audio.mp3",
type:"mp3",
url:"/Documents/audio.mp3"}}
/>
</>
Multiple attachments
Add multiple attachments by attachments prop.
<>
<Attachment attachment={{
name:"logo_dark.svg",
type:"image",
url:"https://erxes.io/static/images/logo/logo_dark.svg"}}
attachments={[{
name:"glyph_dark.svg",
type:"image",
url:"https://erxes.io/static/images/logo/glyph_dark.svg"},
{
name:"flag_right.svg",
type:"image",
url:"https://erxes.io/static/images/logo/flag_right.svg"}]} />
</>
Index
Set the file to start from attachments by index. (Index number starts with 0)
<>
<Attachment attachment={{
name:"logo_dark.svg",
type:"image",
url:"https://erxes.io/static/images/logo/logo_dark.svg"}}
attachments={[{
name:"glyph_dark.svg",
type:"image",
url:"https://erxes.io/static/images/logo/glyph_dark.svg"},
{
name:"flag_right.svg",
type:"image",
url:"https://erxes.io/static/images/logo/flag_right.svg"}}
index={1} />
</>
API
import Attachment from "erxes-ui/lib/components/Attachment";
- required prop
| NAME | TYPE | DESCRIPTION |
|---|---|---|
| name* | string | |
| attachment | type* | string |
| url* | string | |
| size | number | |
| scrollBottom | function | Define function that runs after the image finished loading |
| additionalItem | React.ReactNode | Add additional item |
| simple | boolean | Shows only image |
| index | number | When previewing attachments, define which file to start from |
| name* | string | |
| attachments (array) | type* | string |
| url* | string | |
| size | number |