アップロードしたファイルを別アプリのレコードに登録したい。

kintone カスタマイズ
1

背景・実現したいこと

 1.あるアプリ内にある、ファイルアップロードするinputに、ローカルからファイルを選択する。 ⇒ ここはOK

2.送信ボタン押下で、選択したファイルを別アプリのレコードに登録する。 ⇒ここができない。。。

 

エラー情報 （開発者ツールのコンソール）

エラーコード400です。
{code: ‘CB_IJ01’, id: ‘LH36TSe5IFoCJ6AOA9zQ’, message: ‘不正なJSON文字列です。’}

document.getElementById(“quote_file”) を別の形に変えて送る必要があるでしょうか？
⇒ 調べたら名前情報だけのよう？なので別の形にして送るべきか
ドキュメント以外の、承認ステータスや物件名などにも適当な値を入れてから送る必要があるのでしょうか

 

利用したソースコード

 html

<input type="file" id="quote_file" required></input>

 

js

// TODO 別アプリにレコード登録

          kintone

            .api(kintone.api.url("/k/v1/record", true), "POST", {

              app: DOCUMENT_MANAGEMENT_FILE_APP_ID,

              record: {

                添付ファイル: { value: document.getElementById("quote_file") }

              }

            })

            .then(function () {

              location.reload();

            });
2

ファイルアップロードはこのような手順を踏む必要がありますね

https://developer.cybozu.io/hc/ja/articles/200724665-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89%E3%81%A7%E5%BF%85%E9%A0%88%E3%81%A8%E3%81%AA%E3%82%8B3%E3%81%A4%E3%81%AE%E6%89%8B%E9%A0%86

3

ありがとうございます！そちらで試してみます！

4

以下のように実装してみました。

エラーは表示されなくなりましたが、アプリに登録は出来ていない状態です。

おそらくファイルが取得できていないか、正しく遅れていないか。なのですが、どこが原因か不明です。

お力添えいただけると幸いです。。

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

          const blob = new Blob(['テストファイルです'], {

            type: 'text/plain'

          });

          // FormDataにファイルを格納

          const formData = new FormData();

          formData.append(' __REQUEST_TOKEN__', kintone.getRequestToken());

          formData.append('file', blob, index.html);

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

          const xmlHttp = new XMLHttpRequest();

          xmlHttp.open('POST', kintone.api.url('/k/v1/file', true), false);

          xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

          xmlHttp.onload = () => {

            if (xmlHttp.status === 200) {

              const key = JSON.parse(xmlHttp.responseText).fileKey;

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

              const json = {

                app: DOCUMENT_MANAGEMENT_FILE_APP_ID,

                // id: kintone.app.record.getId(),

                record: {

                  file: {

                    value: [{ fileKey: key }]

                  }

                }

              };

              kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', json);

            }

            xmlHttp.send(formData);

          };
5

xmlHttp.sendの位置がおかしそうです（これは記事がわるいかもです。）

下記でためしたところできました。
気をつけていただきたいのは、コメントにあるようにこれはPUT（レコード更新）の場合ですのでレコード追加したい場合はちょっとちがいますね。

// アップロードファイルをFormData型で準備する
const blob = new Blob(['テストファイルです'], {
  type: 'text/plain'
});

// FormDataにファイルを格納
const formData = new FormData();
formData.append(' __REQUEST_TOKEN__', kintone.getRequestToken());
formData.append('file', blob, 'file.txt');

// ファイルをアップロードしてfileKeyを取得する
const xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', kintone.api.url('/k/v1/file', true));
xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlHttp.onload = () => {
  if (xmlHttp.status === 200) {
    const key = JSON.parse(xmlHttp.responseText).fileKey;
    // アップロードしたファイルとレコードの関連付け
    const json = {
    app: 65, // 任意のアプリID
    id: kintone.app.record.getId(), //任意のレコードID（今回はPUTなのでそうなってます）
      record: {
        '添付ファイル': {
          value: [{ fileKey: key }]
        }
      }
    };
    kintone.api(kintone.api.url('/k/v1/record', true), 'PUT', json);
  }
};
xmlHttp.send(formData);

xmlHttprequestつかうの大変だとおもうので、
kintone rest api clientつかうと楽になります。

ファイルアップロード・ダウンロードのサンプルもあります。
https://github.com/kintone/js-sdk/blob/master/packages/rest-api-client/docs/file.md

6

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。