メインコンテンツまでスキップ
バージョン: 1.13.0

Attachment

Overview​

Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。

Specification​

Property​

使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。

NameTypeDefaultDescriptionRemark
classNamestring""コンポーネントの class 名
errorstring""エラーに表示するテキスト未指定、あるいは空文字の場合、error は表示されない
idstring""コンポーネントの id 名
labelstring""コンポーネントの説明ラベル未指定、あるいは空文字の場合、label は表示されない
language *1string"auto"言語設定指定できるオプション: "auto", "en", "ja", "zh", "zh-TW"
"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"zh"/"zh-TW"/"ja" 以外の場合は、言語設定が "en" になる）
messagestring""コンポーネントに表示するメッセージ（file type/size の制限事項など）
disabledbooleanfalseコンポーネントの選択可/不可設定
requiredIconbooleanfalseコンポーネントの必須アイコン表示/非表示設定
visiblebooleantrueコンポーネントの表示/非表示設定
filesArray<File>[]ファイルリストFile objectもしくは name と size を含むオブジェクトを指定できる
files が配列以外の場合、エラーを出力する
備考

*1: "参照" ボタンと "ここにファイルをドロップします" のテキストは language プロパティの値に応じて切り替わる.

File​

NameTypeDefaultDescriptionRemark
namestring""ファイル名
sizestring""ファイルサイズファイルサイズに応じて以下のように記載される
  • size >= 1073741824: xxx GB
  • 1073741824 > size >= 1048576: xxx MB
  • 1048576 > size >= 1024: xxx KB
  • 1024 > size: xxx bytes

    • Event​

    指定できるイベントの一覧です。

    NameTypeDescriptionRemark
    changefunctionファイルが変更された時のイベントハンドラ引数には Event の event オブジェクトをとる
    event.detail で以下の値を受け取ることができる
  • add-file（ファイル追加された時にトリガーされる）
    • event.detail.type: "add-file"
    • event.detail.oldFiles: 追加前のファイルリスト
    • event.detail.files: 追加後のファイルリスト
    • event.detail.fileIndex: 追加されたファイルの配列番号（Type: Array<number>）
      • "event.detail.files[event.detail.fileIndex[x]]" で追加されたファイルを取得できる
  • remove-file（ファイル削除された時にトリガーされる）
    • event.detail.type: "remove-file"
    • event.detail.oldFiles: 削除前のファイルリスト
    • event.detail.files: 削除後のファイルリスト
    • event.detail.fileIndex: 削除されたファイルの配列番号（Type: Array<number>）
      • "event.detail.oldFiles[event.detail.fileIndex[x]]" で削除されたファイルを取得できる

    • Constructor​

    Attachment(options)
    使用できるコンストラクタの一覧です。

    Parameter​

    NameTypeDefaultDescriptionRemark
    optionsobject{}コンポーネントのプロパティを含むオブジェクト

    Custom CSS​

    ヒント

    Custom CSS をご確認ください。

    コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。

    Property​

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

    Sample Code​

    ヒント

    導入と実装方法 をご確認ください。

    全てのパラメータを指定した場合のサンプルコードです。

    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);
    });
    に最終更新