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

フォローする

(著者:菊地 宏司)

 

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

ちなみに、JavaScriptを使ったkintone REST APIリクエストでは、ファイルのアップロードがサポートされていません。(2014/04 現在)
その為、今回はXMLHttpRequestとCSRFトークンを使ってファイルのアップロードを実現したいと思います。

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

実装の手順と流れ

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

 

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

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

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

Textファイルを作成

 

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

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

HttpRequestの送信

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

レスポンスデータ

 

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

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

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

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

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

 

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

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

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。
Powered by Zendesk