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 で動作を確認しています。