Skip to content

Attachment

Overview

Attachment

Number Description
1 "X" button to remove the related file
2 File name
  • If the length is too long, it will show like "xxx..."
3 File size
  • If the length is too long, it will show like "xxx..."
  • There are 4 types to show the size.
    1. size >= 1073741824 : xxx GB
    2. 1073741824 > size >= 1048576 : xxx MB
    3. 1048576 > size >= 1024 : xxx KB
    4. 1024 > size : xxx bytes
4 Link to show "file select" pop-up box
5 Text to show file limit message
6 Error message
7 Drag drop zone

Constructor

Parameter

Name Type Required Description
options Object No An object contains params of constructor.
options.dropZoneText String No Text will show when the file is dragged over the attachment field. (item 7)
Default value: 'Drop files here.'
options.browseButtonText String No Text of the browse button. (item 4)
Default value: 'Browse'
options.fileLimitText String No Text of the file limit warn part. (item 5)
options.errorMessage String No Error message (item 6)
options.isErrorVisible Boolean No Only when it is true, "errorMessage" will show.
Default value: false
options.files Array<Object> No File objects (ref. https://developer.mozilla.org/en-US/docs/Web/API/File)
Or objects contain "name" and "size"
options.files[].name String No The file name
options.files[].size String No The file size
options.isVisible Boolean No The attachment component will be visible.
Default value: true

Sample

Javascript

const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (<Attachment files={this.state.files} onFilesAdd={this.handleFilesAdd} onFileRemove={this.handleFileRemove} />);
  }
}

Methods

render()

Get dom element of component.

Parameter

None

Returns

Dom element

Sample

Javascript

const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (<Attachment files={this.state.files} onFilesAdd={this.handleFilesAdd} onFileRemove={this.handleFileRemove} />);
  }
}

setFiles(files)

Set the files of attachment field.

Parameter

Name Type Required Description
files Array<Object> Yes File objects (ref. https://developer.mozilla.org/en-US/docs/Web/API/File)
Or objects contain "name" and "size"
files[].name String No The file name
files[].size String No The file size

Returns

None

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];

const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());

const button = new kintoneUIComponent.Button({text: 'Set Files'});
body.appendChild(button.render());
button.on('click', () => {
    attachment.setFiles([{name: 'test_1', size: 12345}]);
});

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  handleClick = () => {
    this.setState({files: [{name: 'test_1', size: 12345}]});
  };

  render() {
    return (
      <div>
        <Attachment files={this.state.files} onFilesAdd={this.handleFilesAdd} onFileRemove={this.handleFileRemove} />
        <button onClick={this.handleClick}>Set Files</button>
      </div>
    );
  }
}

getFiles()

Get all files information of attachment field.

Parameter

None

Returns

Name Type Description
files Array<Object> List of all file objects in the attachment field

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
body.appendChild(attachment.render());

const button = new kintoneUIComponent.Button({text: 'Get Files'});
body.appendChild(button.render());
button.on('click', () => {
    console.log('files:', attachment.getFiles());
});

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  handleClick = () => {
    console.log('files:', this.state.files);
  };

  render() {
    return (
      <div>
        <Attachment files={this.state.files} onFilesAdd={this.handleFilesAdd} onFileRemove={this.handleFileRemove} />
        <button onClick={this.handleClick}>Get Files</button>
      </div>
    );
  }
}

setDropZoneText(dropZoneText)

Set the text of the drop zone

Parameter

Name Type Required Description
dropZoneText String Yes Text will show when the file is dragged over the attachment field.

Returns

None

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setDropZoneText('Drop files here.');

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        dropZoneText="Drop files here."
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

setBrowseButtonText(browseButtonText)

Set the text of the browse button

Parameter

Name Type Required Description
browseButtonText String Yes Text of the browse button

Returns

None

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setBrowseButtonText('Browse');

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        browseButtonText="Browse"
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

setFileLimitText(fileLimitText)

Set the text of the file limit warn part.

Parameter

Name Type Required Description
fileLimitText String Yes Text of the file limit warn part

Returns

None

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setFileLimitText('Maximum: 1 GB');

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        fileLimitText="Maximum: 1 GB"
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

setErrorMessage(errorMessage)

Set the error message.

Parameter

Name Type Required Description
errorMessage String Yes Error message

Returns

None

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];
const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());
attachment.setErrorMessage('Error message');

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        errorMessage="Error message"
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

showError()

Show the error message

Parameter

None

Returns

None

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];

const attachment = new kintoneUIComponent.Attachment({errorMessage: 'Error message'});
body.appendChild(attachment.render());

const showButton = new kintoneUIComponent.Button({text: 'Show Error'});
body.appendChild(showButton.render());
showButton.on('click', () => {
    attachment.showError();
});

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        errorMessage="Error message"
        isErrorVisible={true}
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

hideError()

Hide the error message

Parameter

None

Returns

None

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];

const attachment = new kintoneUIComponent.Attachment({errorMessage: 'Error message'});
body.appendChild(attachment.render());

const showButton = new kintoneUIComponent.Button({text: 'Show Error'});
body.appendChild(showButton.render());
showButton.on('click', () => {
    attachment.showError();
});

const hideButton = new kintoneUIComponent.Button({text: 'Hide Error'});
body.appendChild(hideButton.render());
hideButton.on('click', () => {
    attachment.hideError();
});

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        errorMessage="Error message"
        isErrorVisible={false}
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

on(eventName, callBack)

Register callback for change event

Parameter

Name Type Required Description
eventName String Yes Name of event:
  • 'filesAdd'
  • 'fileRemove'
callback Function Yes callback

Returns

Callback data

Event Name Type Description
filesAdd files Array<Object> List of all file objects that are displayed in the attachment field after files are added.
fileRemove files Array<Object> List of all file objects that are displayed in the attachment field after a file is removed.

Sample

Javascript

const body = document.getElementsByTagName("BODY")[0];

const attachment = new kintoneUIComponent.Attachment();
body.appendChild(attachment.render());

attachment.on('filesAdd', (files) => {
    console.log('files:', files);
});

attachment.on('fileRemove', (files) => {
    console.log('files:', files);
});

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';

export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
    console.log('files:', files);
  };

  handleFileRemove = (files) => {
    this.setState({files});
    console.log('files:', files);
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

show()

Display the attachment component.

Parameter

None

Returns

None

Sample

Javascript

const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());
attachment.show();

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        isVisible={true}
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}

hide()

Hide the the attachment component..

Parameter

None

Returns

None

Sample

Javascript

const attachment = new kintoneUIComponent.Attachment({files: [{name: 'test_1', size: 12345}]});
const body = document.getElementsByTagName('BODY')[0];
body.appendChild(attachment.render());
attachment.hide();

React

import {Attachment} from '@kintone/kintone-ui-component';
import React from 'react';
export default class Plugin extends React.Component {
  state = {
    files: [],
  };

  handleFilesAdd = (files) => {
    this.setState({files});
  };

  handleFileRemove = (files) => {
    this.setState({files});
  };

  render() {
    return (
      <Attachment
        files={this.state.files}
        isVisible={false}
        onFilesAdd={this.handleFilesAdd}
        onFileRemove={this.handleFileRemove}
      />
    );
  }
}