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.

<>
	<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

Name		Type	Description
attachment*	name*	string	Define file name
	type*	string	Define file type
	url*	string	Declare file path
	size	number	Shows file size
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
attachments (array)	name*	string	Define file name
	type*	string	Define file type
	url*	string	Declare file path
	size	number	Shows file size