概要
kintoneでレコードにファイルを添付するとき、通常はkintone標準のファイル添付フィールドを用います。
この記事では、ファイルを添付フィールドを不可視にして、独自のファイル選択のためのinputタグを配置し、
そこで指定されたファイルを不可視にしていたファイル添付フィールドに関連づける例を紹介します。
フォーム配置
フォームに、ファイル添付フィールドと、inputタグと配置するスペースを配置します。
showイベントで、スペース内に<input type=”text” />を生成します。また、ファイル添付フィールドを不可視にします。
// 要 'jquery';
// 要 '51-modern-default.css'
kintone.app.record.setFieldShown('ファイル添付', false);
let el = kintone.app.record.getSpaceElement('upload-file-space');
$(el).append('<input id="input-file" class="input-file-cybozu" type="file" />');
submitイベントで、指定されたファイルをローカルからFileReaderで読み込み、Blobを生成します。
読み込んだバイナリデータをUnit8ArrayでBlogのコンストラクタに渡すのがポイントです。
// <input type="file" />で指定されたファイルを読み込み、Blobを生成する。
function createPhotoFileBlob(fileElemet) {
return new kintone.Promise((resolve, reject) => {
let blob;
if (typeof(fileElemet.val()) != 'undefined' && fileElemet.val() != "") {
let fileReader = new FileReader();
let file = fileElemet[0].files[0];
fileReader.readAsArrayBuffer(file);
fileReader.onload = ()=>{
blob = new Blob([new Uint8Array(fileReader.result)], {
type: file.type
});
return(blob);
};
} else {
return(blob);
}
});
}
生成したBlobをkintoneのサーバにアップロードすると、アップロードしたファイル固有のfileKeyを取得することができます。
// kintoneサーバにファイルをアップロードして、fileKeyを取得する。
function uploadFile(fileElemet, blob){
let formData = new FormData();
formData.append("__REQUEST_TOKEN__", kintone.getRequestToken());
formData.append("file", blob, fileElemet.val());
let 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);
return JSON.parse(xmlHttp.responseText).fileKey;
}
このfileKeyを使って、REST APIで既存レコードの更新や新規レコードの登録を実行します。
よくある質問
一つのfileKeyを複数レコードに使い回せるの?
使いまわせません。更新・追加したいレコードの数だけ、ファイルをアップロードしてfileKeyを取得する必要があります。
ただ、Blobはローカルで持っているデータなので、使いまわすことができます。
submitイベントでevent.record.ファイル添付フィールド.value = fileKeyとしてreturn eventしても反映されない。
そういうものらしいです。なので、以下のようなやり方があります。
fileKey一時保管用のテキストフィールドを新設し。
submitイベントで上記フィールドに、fileKeyを保存。
submit.successイベントでfileKeyを取り出し、kintone apiでレコードを更新。
let record = event.record;
if (record.ファイルキー.value != "") {
var json = {
app: kintone.app.getId(),
id: record.レコード番号.value,
record: {
ファイル添付フィールド: {
value: [{
fileKey: record.ファイルキー.value
}]
}
}
};
return new kintone.Promise((resolve, reject) => {
kintone.api('/k/v1/record', 'PUT', json,
(resp)=>{resolve(resp);},
(error)=>{reject(error)});
})
.then((resp)=>{return event;})
.catch((error)=>{console.log(error);return event;});
} else {
return event;
}