はじめまして！！ノベルワークス入社2年目のそうま(@SomaActionPlan)です！！
今日は、kintoneRestAPIを利用した添付ファイルアップロードの実装で詰まった点を備忘録として残そうと思います！！
前提
kintoneには添付ファイルフィールドというフィールドタイプが存在し、さまざまな形式のファイルをアップロードし保存する事が出来ます。
このフィールドにファイルをアップロードするAPIが存在するので、それを使用します。
詰まった点其1 - Blobオブジェクト
まず最初に、ファイルをアップロードする前に一度ファイルの内容をMIMEタイプを指定してBlobオブジェクトに変換する必要がある点を理解できずに詰まりました。
MIMEタイプ
ファイルの形式や性質を表す種別。
例) jpeg拡張子 -> image/jpeg
Blobオブジェクト
読み取り専用のバイナリーデータを保持するオブジェクト。
https://developer.mozilla.org/ja/docs/Web/API/Blob
blobの作成自体は、以下のコードで実装できました。
const blob = new Blob([<任意のファイル内容>], { type: <任意のmimeType> });
詰まった点其2 - ファイルキーの取得
次にファイルキーの取得までに中々時間がかかってしまったので、以下に手順を残します。
フォームデータの作成
まず初めにフォームデータを作成します。
フォームデータ
webフォームから送信するデータ形式の1つ、キーと値のペアを持つ
https://e-words.jp/w/%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%83%87%E3%83%BC%E3%82%BF.html
const formData = new FormData();
先程作成した Blob オブジェクトを file をキーにしてフォームデータに追加します。
formData.append("file", blob, <任意のファイル名>);
ファイルをアップロードする際、CSRFトークンが必要みたいなので、kintone.getRequestToken を使用しトークンを作成します。
CSRFトークン
webアプリケーションがセッションごとに発行するトークン
const requestToken = kintone.getRequestToken()
生成したトークンを __REQUEST_TOKEN__ をキーにしてフォームデータに追加します。
formData.append("__REQUEST_TOKEN__", requestToken);
これでフォームデータは完成です！
ファイルアップロード
ファイルアップロードAPIでは、kintone REST APIを実行するための関数であるkintone.api()を使用出来ないので fetch APIを使用します。
これに気づくのが遅れてしまい少し詰まってしまいました...。
先程作成した フォームデータを以下のように body に指定します。
const headers = {
"X-Requested-With": "XMLHttpRequest",
};
const response = await fetch(`https://<kintoneのサブドメイン>}/k/v1/file.json`, {
method: "POST",
headers,
body: formData,
});
これでファイルアップロードが完了し、ファイルキーを取得できます！
詰まった点其3 - ファイルキーとレコードの紐付け
まず最初に、ファイルアップロードのAPIを使用してファイルをアップロードした時点で、そのままレコードにも保存されるものだと思っていました。
そうではなくレコードへの保存には以下のステップが必要でした。
- ファイルを一時保存領域に保存する
- ファイルキーを取得する
- 発行したファイルキーを対象のレコードに保存する
先程のファイルアップロード時に取得したレスポンスデータにファイルキーが存在するので、そのファイルキーを以下のようにしてレコードに保存します。
const fileKey = (await response.json()).fileKey;
const record = {
<対象の添付ファイルフィールドのフィールドコード> : {
value: [
{
fileKey,
},
],
},
};
const body = {
app: <対象のアプリID>
id: <対象のレコードID>
record,
};
await kintone.api(kintone.api.url("/k/v1/record.json", true), "PUT", body);
これでレコードへファイルの保存が完了しました！！
纏め
添付ファイルフィールドの更新は、他のフィールドと違い少し手順を踏む必要があるという事を理解できました！今後の実装に役立てていこうと思います！