Attachment

Overview

The Attachment component allows the user to upload files by selecting or dragging.

---

Specification

Property

Here is a list of properties that can be used for modifying the component:

Name	Type	Default	Description	Remark
className	string	""	Component class name
error	string	""	Text to be displayed in error	Error will not be displayed if unspecified or left empty
id	string	""	Component id name
label	string	""	Label for the component	Label will not be displayed if unspecified or left empty
language *1	string	"auto"	Language setting	Available options: "auto", "en", "ja", "zh", "zh-TW", "es" If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"ja"/"zh"/"zh-TW"/"es", the language setting will be "en")
message	string	""	Message to display in the component (ex. file type/size restriction)
disabled	boolean	false	Enable/Disable the component
requiredIcon	boolean	false	Show/Hide the required icon
visible	boolean	true	Show/Hide the component
files	Array<File>	[]	List of files	You can specify File object or object contains name and size Will result an error if the value of files is not an array

info

*1: The text of "Browse" button and "Drag & drop zone" will be changed according to the language property.

File

Name	Type	Default	Description	Remark
name	string	""	File name
size	string	""	File size	There are 4 types to show the size: size >= 1073741824: xxx GB 1073741824 > size >= 1048576: xxx MB 1048576 > size >= 1024: xxx KB 1024 > size: xxx bytes

Event

Here is a list of events that can be specified:

Name	Type	Description	Remark
change	function	Event handler when the files have been changed	It will pass the event object as the argument You can receive the following values in event.detail add-file (Triggered if add any file) event.detail.type: "add-file" event.detail.oldFiles: Files before add event.detail.files: Files after add event.detail.fileIndex: Index number of the added file (Type: Array<number>) You can get the added file by "event.detail.files[event.detail.fileIndex[x]]" remove-file (Triggered if remove any file) event.detail.type: "remove-file" event.detail.oldFiles: Files before remove event.detail.files: Files after remove event.detail.fileIndex: Index number of the removed file (Type: Array<number>) You can get the removed file by "event.detail.oldFiles[event.detail.fileIndex[x]]"

Constructor

Attachment(options)
Here is a list of available constructors:

Parameter

Name	Type	Default	Description	Remark
options	object	{}	Object that includes component properties

Custom CSS

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property

Name
--kuc-attachment-width
--kuc-attachment-height
--kuc-attachment-item-font-size
--kuc-attachment-message-font-size
--kuc-attachment-message-color

---

Sample Code

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const space = kintone.app.record.getSpaceElement('space');

const attachment = new Kuc.Attachment({
  label: 'Attachment',
  files: [
    { name: 'file.txt', size: '150' },
    new File(['foo'], 'foo.txt', { type: 'text/plain' })
  ],
  language: 'auto',
  message: 'Max size: 50MB',
  error: 'Error occurred!',
  className: 'options-class',
  id: 'options-id',
  visible: true,
  disabled: false,
  requiredIcon: false
});
space.appendChild(attachment);

attachment.addEventListener('change', event => {
  console.log(event);
});

---

Related Articles

• Attachment customization