添付ファイル操作は、JSカスタマイズの中では少し敷居が高いです。 kintone.api()でfile.jsonを扱えないため、XMLHttpRequest()等を使ったリクエスト方法の知識が必要となります。 ところが、2019年3月にリリースされたkintone JS SDKを利用すると容易に添付ファイル操作ができます。 使い方は、https://developer.cybozu.io/hc/ja/articles/360025484571やhttps://kintone.github.io/kintone-js-sdk/latest/で紹介されています。 今回は、kintone JS SDKの利用例を紹介します。
サンプル
詳細画面で、ファイルをドロップするとレコードの添付ファイルに追加します。
フォーム設定
コード
JavaScript
「kintone-js-sdk.min.js」を読み込み後、下記「sample.js」を読み込みます。
・sample.js
(function() {"use strict";kintone.events.on(['app.record.detail.show',
],function(event){vardropArea=document.createElement('div');dropArea.id='dropArea';dropArea.innerText='ドロップしてファイルを追加．';dropArea.addEventListener('dragover',function(e){e.preventDefault();
});dropArea.addEventListener('drop',function(e){e.preventDefault();varkintoneConnection=newkintoneJSSDK.Connection();varkintoneFile=newkintoneJSSDK.File(kintoneConnection);varkintoneRecord=newkintoneJSSDK.Record(kintoneConnection);Promise.all([].map.call(e.dataTransfer.files,function(file){returnkintoneFile.upload(file.name, file);
})).then(function(responses){returnkintoneRecord.updateRecordByID(kintone.app.getId(),kintone.app.record.getId(),
{添付ファイル:{value:event.record.添付ファイル.value.concat(responses)}
}
);
}).then(function(){location.reload();
});
});kintone.app.record.getSpaceElement('space').appendChild(dropArea);
});
})();
CSS
下記「sample.css」を読み込みます。
#dropArea{padding:100px;border:1pxdashed#000;text-align:center;
}
コード比較
kintone JS SDKを利用しなかった場合と利用した場合で、ファイルアップロードのコードを比較すると差は歴然ですね。
・kintone JS SDKを利用しなかった場合
varformData=newFormData();varxhr=newXMLHttpRequest();formData.append('\_\_REQUEST\_TOKEN\_\_',kintone.getRequestToken());formData.append('file', file,file.name);xhr.open('POST',encodeURI('/k/v1/file.json'));xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');xhr.addEventListener('load',function(){// アップロード後処理});xhr.send(formData);
・kintone JS SDKを利用した場合
varkintoneConnection=newkintoneJSSDK.Connection();varkintoneFile=newkintoneJSSDK.File(kintoneConnection);kintoneFile.upload(file.name, file).then(function(response){// アップロード後処理});