アプリAの添付ファイルの画像ファイルをアプリBの添付ファイルにコピーしたい

kintone カスタマイズ
1

アプリAの添付ファイルに登録した画像ファイルを、アプリBの添付ファイルに自動的にコピーして登録するということをやりたいと思っています。

・ファイルダウンロードで必須となる2つの手順
https://cybozudev.zendesk.com/hc/ja/articles/200814380-%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%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%8B2%E3%81%A4%E3%81%AE%E6%89%8B%E9%A0%86

・ファイルアップロードで必須となる3つの手順
https://cybozudev.zendesk.com/hc/ja/articles/200724665

上記ページを参考に、アプリAのJavaScriptで、以下のようなプログラムを組んでみました。

1.fileKeyの取得
2.ファイルのダウンロード
3.2.のファイルをFormData型に格納
4.ファイルをアップロードしてアップロード時のfileKeyを取得
5.アプリBの添付ファイルにアップロード時のfileKeyを登録

エラーも出ず動作しているのですが、アプリBの該当レコードを見ると、画像のプレビューが表示されない（枠だけが表示される壊れ画像のような）状態になってしまいます。

以下、2,3,4のところのコードだけ抜粋します。
※filekey, contentType, filenameは予め取得済み

var url = ‘/k/v1/file.json?fileKey=’ + filekey;
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, url, false);
xhr.setRequestHeader(‘X-Requested-With’ , ‘XMLHttpRequest’);
xhr.setRequestHeader(“Accept-Charset”, “x-user-defined”);
xhr.onreadystatechange = function(event){
if ((xhr.readyState == 4) && (xhr.status == 200)){
var blob = new Blob([xhr.response], {type:contentType});
var formData = new FormData();
formData.append(" REQUEST_TOKEN", kintone.getRequestToken());
formData.append(“file”, blob , filename);
var xmlHttp = new XMLHttpRequest();
xmlHttp.open(“POST”, encodeURI(‘/k/v1/file.json’), false);
xmlHttp.setRequestHeader(‘X-Requested-With’, ‘XMLHttpRequest’);
xmlHttp.responseType = ‘multipart/form-data’;
xmlHttp.send(formData);
var key = JSON.parse(xmlHttp.responseText).fileKey;
}
};
xhr.send();

尚、kintoneでは画像部分にマウスオーバーするとファイル名とファイルサイズが表示されますが、アプリAでのサイズよりもアプリBの方のサイズが大きくなってしまっているので、バイナリの形で正しくアップロードできていないのではないかと思われます。
上記コードではダウンロードしたファイルデータ xhr.response をそのまま
var blob = new Blob([xhr.response], {type:contentType});
でBlobにしてアップロードしており、たぶんこの辺りがダメな部分ではないかと思っていますが、そもそもこういうやり方で良いのか？添付ファイルを別アプリにコピーする他のやり方があるのか？ということや、上記のようなやり方でJavaScript経由でバイナリデータを正しくアップロードする方法があるのか？といった辺りをアドバイスいただきたく思っています。

宜しくお願いします。

2

その後自己解決しましたので共有しておきます。
参考URL： http://www.html5rocks.com/ja/tutorials/file/xhr2/

var url = ‘/k/v1/file.json?fileKey=’ + filekey;
var xhr = new XMLHttpRequest();
//xhr.open(‘GET’, url, false);
xhr.open(‘GET’, url, true);
xhr.responseType = ‘blob’;
xhr.setRequestHeader(‘X-Requested-With’ , ‘XMLHttpRequest’);
//xhr.setRequestHeader(“Accept-Charset”, “x-user-defined”);
xhr.onreadystatechange = function(event){
if ((xhr.readyState == 4) && (xhr.status == 200)){
//var blob = new Blob([xhr.response], {type:contentType});
var formData = new FormData();
formData.append(" REQUEST_TOKEN", kintone.getRequestToken());
//formData.append(“file”, blob, filename);
formData.append(“file”, xhr.response, filename);

var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("POST", encodeURI('/k/v1/file.json'), false);
  xmlHttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  xmlHttp.responseType = 'multipart/form-data';
  xmlHttp.send(formData);
  var key = JSON.parse(xmlHttp.responseText).fileKey;

}
};
xhr.send();

ポイントは

xhr.responseType = ‘blob’;

です。これにより、xhr.responseがそのままBlobになってますので、そのままFormDataにappendできます。

formData.append(“file”, xhr.response, filename);

※尚、xhr.responseTypeを設定する場合、xhr.open()の際に非同期通信にしておく必要があります。

xhr.open(‘GET’, url, true);