Tips

ファイルアップロードで必須となる 3 つの手順

著者名：菊地 宏司

目次

はじめに

固定リンクがコピーされました

今回はJavaScriptを使ったkintoneのレコードにファイルをアップロードする方法を説明します。
JavaScriptからのアップロードができたら、Aのアプリの添付ファイルをボタンひとつでBのアプリに登録などアプリ間の連携に使えそうですね。

ちなみに、ファイルアップロードAPIは、 kintone REST API リクエストを送信するに対応していません。
そのため、今回はXMLHttpRequestとCSRFトークンを使ってファイルのアップロードを実現したいと思います。

アップロードしたファイルは添付ファイルとして認識されるため、あらかじめアプリには添付ファイルフィールドを設定しておく必要があります。

実装の手順と流れ

固定リンクがコピーされました

  • ファイルをFormData型に設定する。
  • ファイルをアップロードしてそのfileKeyを取得する。
  • 取得したfileKeyとレコードを関連付ける。

アップロードファイルを FormData 型で準備する

固定リンクがコピーされました

前段階の準備としてHttpRequestで送信するために、ファイルをFormData型に格納します。
そのため、まずはBlob型で作成し、その後FormData型に設定します。

FormData型でテキストファイルを作成するコードは次のとおりです。

1
2
3
4
5
6
7

const blob = new Blob(['テストファイルです'], {
  type: 'text/plain'
});
// FormDataにファイルを格納
const formData = new FormData();
formData.append('__REQUEST_TOKEN__', kintone.getRequestToken());
formData.append('file', blob, 'test.txt');

ファイルをアップロードしてfileKeyを取得する

固定リンクがコピーされました

ファイルをアップローする APIを使って、ファイルをサーバーにアップロードし、そのレスポンスのfileKeyを受け取ります。

ファイルアップロードAPIは kintone REST API リクエストを送信するに対応していないため、下記サンプルコードではXMLHttpRequestを利用しています。
アップロードする際は前述のFormData型のデータをHttpRequestに設定して送信します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', kintone.api.url('/k/v1/file', true), false);
xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlHttp.onload = () => {
  if (xmlHttp.status === 200) {
    const key = JSON.parse(xmlHttp.responseText).fileKey;
    // アップロードしたファイルとレコードを関連付けする処理に続く
  }
};
xmlHttp.send(formData);

APIのレスポンスは以下のJSON形式で返却されます。

1
2
3
4


{
  "fileKey": "590279cd-6657-419f-8fac-d760a4a6caaa"
}

このfileKeyは ファイルをダウンロードする APIでは使用できません。

アップロードしたファイルとレコードの関連付け

固定リンクがコピーされました

先ほど取得したfileKeyとレコードを関連付けします。
関連付けることによりレコードに添付ファイルとして設定されます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const json = {
  app: kintone.app.getId(),
  id: kintone.app.record.getId(),
  record: {
    file: {
      value: [{fileKey: key}]
    }
  }
};
kintone.api(kintone.api.url('/k/v1/record.json', true), 'PUT', json);

以上でファイルアップロードは完了です。

information

このTipsは、2014年4月版kintoneで動作を確認しています。