Tips

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

著者名：菊地 宏司

目次

はじめに

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

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

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

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

実装の手順と流れ

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

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

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

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

前段階の準備として、fetch APIを使用して送信するために、ファイルを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');

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const headers = {
  'X-Requested-With': 'XMLHttpRequest',
};
const resp = await fetch('/k/v1/file.json', {
  method: 'POST',
  headers,
  body: formData,
});
const data = await resp.json();
// アップロードしたファイルとレコードを関連付けする処理に続く

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

1
2
3

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

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

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

information

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