Skip to main content
Version: 1.10.0

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:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
errorstring""Text to be displayed in errorError will not be displayed if unspecified or left empty
idstring""Component id name
labelstring""Label for the componentLabel will not be displayed if unspecified or left empty
language *1string"auto"Language settingAvailable options: "auto", "en", "ja", "zh", "zh-TW"
If setting "auto", it will be according to the HTML lang setting (If the lang setting is other than "en"/"zh"/"zh-TW"/"ja", the language setting will be "en")
messagestring""Message to display in the component (ex. file type/size restriction)
disabledbooleanfalseEnable/Disable the component
requiredIconbooleanfalseShow/Hide the required icon
visiblebooleantrueShow/Hide the component
filesArray<File>[]List of filesYou can specify File object or object contains name and size
Will result an error if the value of files is not an array
File.namestring""File name
File.sizestring""File sizeThere 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
  • info

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

    Event

    Here is a list of events that can be specified:

    NameTypeDescriptionRemark
    changefunctionEvent handler when the files have been changedIt 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

    NameTypeDefaultDescriptionRemark
    optionsobject{}Object that includes component properties

    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);
    });