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

（著者：菊地 宏司）

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

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

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

  

実装の手順と流れ

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

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

まず、前段階の準備としてHttpRequestで送信するためにファイルをFormData型に格納する必要があります。

この時ファイルは一度Blob型に格納した後にFormData型に設定してください。

Textファイルを作成

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

ファイルをサーバにアップロードし、そのレスポンスのfileKeyを受け取ります。
※ ここで取得されるfileKeyはファイルダウンロードで利用することは出来ません。
アップロードする際は前述のFormDataをHttpRequestに設定して送信してください。

ファイルアップロード API は kintone.api() を使った REST API リクエストに対応していないため、
下記サンプルコードは XMLHttpRequest を利用しています。

HttpRequestの送信

HTTPレスポンスは以下のようなJSON形式で返却されます。

レスポンスデータ

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

先ほど取得したfileKeyと指定したレコードを関連付けします。

関連付けることによりレコードに添付ファイルとして設定されます。

既存のレコードにファイルを追加

以上でファイルアップロードが完了となります。

このTipsは、2014年4月版で確認したものになります。