ファイルアップロードで必須となる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型でテキストファイルを作成するコードは次のとおりです。
|
|
手順2:ファイルをアップロードしてfileKey
を取得する
ファイルをアップロードするAPIを使って、ファイルをサーバーにアップロードし、そのレスポンスのfileKey
を受け取ります。
ファイルアップロードAPIは
kintone REST APIリクエストを送信するに対応していないため、下記サンプルコードではfetch APIを利用しています。
アップロードする際は前述のFormData型のデータをfetch APIに設定して送信します。
|
|
APIのレスポンスは以下のJSON形式で返却されます。
|
|
このfileKey
は
ファイルをダウンロードするAPIでは使用できません。
手順3:アップロードしたファイルとレコードの関連付け
先ほど取得したfileKey
とレコードを関連付けします。
関連付けることによりレコードに添付ファイルとして設定されます。
|
|
以上でファイルアップロードは完了です。
このTipsは、2024年5月版kintoneで動作を確認しています。