Skip to main content

Attachment

Add any type of attachment or attachments with preview. Click logo or picture to preview.

Example#

Add attachment with preview.

text.docx
<>
<Attachment attachment={{
name:"text.docx",
type:"text",
url:"/Documents/test.docx"}}
/>
</>

Size#

Add file size by adding size prop to attachment information array.

text.docx
Size: 4kB
<>
<Attachment attachment={{
name:"text.docx",
type:"text",
url:"/Documents/test.docx",
size:4179}}
/>
</>

Additional item#

Add additional content under the title by additionalItem prop.

text.docx
Additional text
<>
<Attachment attachment={{
name:"text.docx",
type:"text",
url:"/Documents/test.docx"}}
additionalItem="Additional text" />
</>

Image#

Click on picture to see preview.

logo_dark.svg
<>
<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.

https://erxes.io/static/images/logo/logo_dark.svg
<>
<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.

audio.mp3
<>
<Attachment attachment={{
name:"audio.mp3",
type:"mp3",
url:"/Documents/audio.mp3"}}
/>
</>

Multiple attachments#

Add multiple attachments by attachments prop.

logo_dark.svg
<>
<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)

logo_dark.svg
<>
<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

NameTypeDefualtDescription
attachment*name*stringDefine file name
type*stringDefine file type
url*stringDeclare file path
sizenumberShows file size
scrollBottomfunctionDefine function that runs after the image finished loading
additionalItemReact.ReactNodeAdd additional item
simplebooleanShows only image
indexnumberWhen previewing attachments, define which file to start from
attachments (array)name*stringDefine file name
type*stringDefine file type
url*stringDeclare file path
sizenumberShows file size
Last updated on by enkhzule