javascriptでのファイルアップロードについて

お世話になります。

 

以下URLを参考にし、javascriptでのファイルアップロードをしたいと考えております。

https://cybozudev.zendesk.com/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

 

最終目標としては、Aアプリのレコード詳細画面にボタンを作成し、そのボタンを押すとBアプリに登録されている添付ファイルを

Aアプリのレコードに登録するといった動作を目指しており、

 

その前段階として上記URLを参照し、テストファイルを作成し、Aアプリに登録するコードを書いてみたのですが、

ボタンを押しても何の反応もありませんでした。

==================================================================================-

(function() {
“use strict”;

//レコードの詳細画面で適用する
var events = [‘app.record.detail.show’,
]

kintone.events.on(events, function(event) {

// 特定のスペースフィールドにボタンを設置
// ボタン
var mySpaceFieldButton = document.createElement(‘button’);
mySpaceFieldButton.id = ‘fileup’;
mySpaceFieldButton.innerHTML = ‘添付する’;

// ボタンクリック時の処理
mySpaceFieldButton.onclick = function() {

//textファイルを作成
var blob = new Blob([“テストファイルです”], {type:“text/plain”});
//FormDataにファイルを格納
var formData = new FormData();
formData.append(“__REQUEST_TOKEN__”, kintone.getRequestToken());
formData.append(“file”, blob , “test.txt”);

//httpRequestの送信
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;

//既存のレコードにファイルを追加
var json = {
app:kintone.app.getId(),
id:kintone.app.record.getId(),
record:{
file:{
value:[
{fileKey:key}
]
}
}
};

kintone.api(‘/k/v1/record’, ‘PUT’, json);

}

//ボタンを設置
kintone.app.record.getSpaceElement(‘fileup’).appendChild(mySpaceFieldButton);

});

})();

==================================================================================-

登録までの流れとしては、

①テストファイルを作成

②POSTでサーバーにテストファイルを登録し、ファイルキーを取得

③取得したファイルキーをPUTで指定のレコードに登録

だと思うのですが、上記コードのどこが間違っているのでしょうか。

 

大変初歩的なご質問で申し訳ありませんが、

ご指摘願います。

コード自体は問題なさそうに見えます。コンソールやリクエスト状況は意図した通りになってますでしょうか。

Ryu Yamashita 様

ご回答いただきありがとうございます。

 

ご指摘のあったリクエスト状況を見たところ、以下の部分にエラーが出ておりました。

=============================

xmlHttp = new XMLHttpRequest();

=============================

上記の部分を「var xmlHttp = new XMLHttpRequest();」に修正したところ、テキストファイルの添付は成功しました。

 

次に、Aアプリのレコード詳細画面上でボタンを押すと、Bアプリの指定レコードに保存されている添付ファイルをコピーする

という動作にチャレンジしたのですが、うまく動作しませんでした。

現在のコードは以下の通りです。

=======================================================================

(function() {
“use strict”;

//レコードの追加、編集、詳細画面で適用する
var events = [‘app.record.detail.show’,
]

kintone.events.on(events, function(event) {

// 特定のスペースフィールドにボタンを設置
// ボタン
var mySpaceFieldButton = document.createElement(‘button’);
mySpaceFieldButton.id = ‘fileup’;
mySpaceFieldButton.innerHTML = ‘添付する’;

// ボタンクリック時の処理
mySpaceFieldButton.onclick = function() {

//対象のレコードを取得
kintone.api(‘/k/v1/record’, ‘GET’, { app: 107, id: 2}, function (response) {

//fileKeyの取得
var filekey = response[‘record’][‘File’][‘value’][0].fileKey;

});

//取得したfileKeyをurlに設定します。
var url = ‘/k/v1/file.json?fileKey=’ + filekey;
var xhr = new XMLHttpRequest();
xhr.open(‘GET’, url, true);

xhr.responseType = ‘blob’;

xhr.setRequestHeader(‘X-Requested-With’ , ‘XMLHttpRequest’);

xhr.onreadystatechange = function(event){
if ((xhr.readyState == 4) && (xhr.status == 200)){

var formData = new FormData();
formData.append(“REQUEST_TOKEN”, kintone.getRequestToken());
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();

//既存のレコードにファイルを追加
var json = {
app:kintone.app.getId(),
id:kintone.app.record.getId(),
record:{
file:{
value:[
{fileKey:key}
]
}
}
};

kintone.api(‘/k/v1/record’, ‘PUT’, json);

location.reload();

}

//ボタンを設置
kintone.app.record.getSpaceElement(‘fileup’).appendChild(mySpaceFieldButton);

});

})();

=======================================================================

リクエスト状況では、

var url = ‘/k/v1/file.json?fileKey=’ + filekey;

の部分でエラーがでていたのですが、記載の方法に問題があるのでしょうか?

 

大変お手数ですが、アドバイスなどいただければと思います。

> var url = ‘/k/v1/file.json?fileKey=’ + filekey;

> の部分でエラーがでていたのですが、記載の方法に問題があるのでしょうか?

 

どんなエラーメッセージが出ていたか、聞き返させてもらおうと思いましたが、エラーはfileKeyの変数が未定義といった類かと想像しました。その直前のkintone.api()が非同期なためです。var filekey = response[‘record’][‘File’][‘value’][0].fileKey; が処理される前に、kintone.api()のブロック以降の処理が走っていると考えられます。

 

また、ファイルダウンロードはこの辺(12)を参考にblob形式を創りだして、それをアップロードする感じになると思います。

お世話になっております。

 

filekeyとfilenameは予め取得した値を、ベタ打ちで入力することにしました。

以下のようなコードになったのですが、やはりエラーが出てしまいます。

============================================================

(function() {
“use strict”;

//レコードの詳細画面で適用する
var events = [‘app.record.detail.show’,
]

kintone.events.on(events, function(event) {

// 特定のスペースフィールドにボタンを設置
// ボタン
var mySpaceFieldButton = document.createElement(‘button’);
mySpaceFieldButton.id = ‘fileup’;
mySpaceFieldButton.innerHTML = ‘添付する’;

// ボタンクリック時の処理
mySpaceFieldButton.onclick = function() {

var filekey = “20160202073724C7CDAADDB13149A080DAB87221E39F35114”;

var filename = “テスト画像.png”;

var url = ‘/k/v1/file.json?fileKey=’ + filekey;
var xhr = new XMLHttpRequest();

xhr.open(‘GET’, url, true);
xhr.responseType = ‘blob’;
xhr.setRequestHeader(‘X-Requested-With’ , ‘XMLHttpRequest’);

xhr.onreadystatechange = function(event){

if ((xhr.readyState == 4) && (xhr.status == 200)){

var formData = new FormData();
formData.append(“REQUEST_TOKEN”, kintone.getRequestToken());

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();

//既存のレコードにファイルを追加
var json = {
app:kintone.app.getId(),
id:kintone.app.record.getId(),
record:{
file:{
value:[
{fileKey:key}
]
}
}
};

kintone.api(‘/k/v1/record’, ‘PUT’, json);

location.reload();

}

//ボタンを設置
kintone.app.record.getSpaceElement(‘fileup’).appendChild(mySpaceFieldButton);

});

})();

============================================================

 

xmlHttp.send(formData); の部分で

Failed to load resource: the server responded with a status of 520 (520) というエラーが出ております。

 

以下のトピックを参考にさせていただいたのですが、構文に間違いがあるのでしょうか?

https://cybozudev.zendesk.com/hc/ja/community/posts/201573504-%E3%82%A2%E3%83%97%E3%83%AAA%E3%81%AE%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E7%94%BB%E5%83%8F%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%97%E3%83%AAB%E3%81%AE%E6%B7%BB%E4%BB%98%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%B3%E3%83%94%E3%83%BC%E3%81%97%E3%81%9F%E3%81%84

 

お手数をお掛けいたしますが、ご指摘いただければと思います。