カテゴリー内の他の記事

ファイルアップロードで必須となる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に設定して送信してください。

HttpRequestの送信

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

レスポンスデータ

 

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

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

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

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

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

 

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

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

サインインしてコメントを残してください。