編集画面にて添付ファイルのフィールドに表示されているファイル名(jpgとかpng)を画像表示(サムネイル)にすることは可能でしょうか。
また、可能な場合、どのようにすればいいか教えてください。
ススム様
お世話になっております。
cstapの江田です。
アップロード済みの画像については下記のようなコードで、サムネイル表示に切り替えられます。
(function() {
"use strict";
kintone.events.on(['app.record.create.show','app.record.edit.show'], function(event){
var record = event.record;
record.添付ファイル.value.forEach(function(element, index){
filedownload(element.fileKey, index);
});
return event;
});
function filedownload(filekey, index){
var parent = document.getElementsByClassName('plupload_file_name')[index];
var apiurl = '/k/v1/file.json?fileKey=' + filekey;
var xhr = new XMLHttpRequest();
xhr.open('GET', apiurl, true);
xhr.setRequestHeader('X-Requested-With' , 'XMLHttpRequest'); //これが無いとIE,FFがNG
xhr.responseType = "blob";
var blob = xhr.responseType;
xhr.onload = function() {
//blobからURL生成
var blob = xhr.response;
var url = window.URL || window.webkitURL;
var image = document.createElement('img');
image.src = url.createObjectURL(blob);
image.style["max-width"] = "100%";
image.style["max-height"] = "100%";
parent.removeChild(parent.firstChild);
parent.appendChild(image);
};
xhr.send();
}
})();
新規にアップロードしようとする画像については、eventオブジェクトにもfileオブジェクトにもファイル情報が保存されないため、kintoneのコードを読みながらファイル情報の記録場所を探らない限り実装は困難かと思います。
江田様
お世話になっております。
ススムです。
教えていただき、ありがとうございます。
教えていただいたコードで試してみます。
以上です。
江田様
お世話になっております。
ススムです。
教えていただいたコードで試してみましたが、
うまく画像が表示されない状況です。
※ファイル名のままでサムネイル表示せず
設定した内容にるいて不備があれば教えて頂けますか。
以下、頂いたコードで変更しなければいけないところを、
変更致しました。
record.添付ファイル.value.forEach(function(element, index){ ←「添付ファイル」を「キズ写真」というフィールドコードに変更
それ以外でも変更する箇所はございますか。
また、キズ写真(添付ファイル)のフィールドにある参照ボタンから写真を取り込む時、
写真はデスクトップとかローカルに保存してある画像ファイルを選択しています。
一覧の画面やレコード詳細の画面ではちゃんとサムネイル表示されますが、
レコードの編集画面ではキズ写真(添付ファイル)フィールドにはファイル名で表示されたままとなります。
レコードの編集画面でもキズ写真(添付ファイル)フィールドにあるファイル名をサムネイル表示させたいのですが。
お手数おかけしてしまいもうしわけございませんが、
教えてください。
ススム様
以前私が書いたコードは、既存レコードのアップロード済みの画像を編集ページでサムネイル表示するためのコードでした。
参照はしたけれど、その後レコードの保存がされていない状態にある画像をサムネイル表示することには対応しておりません。
以前のコメントでも書いた通り、新規画像のサムネイル表示はkintoneのJavaScriptコード等を読みながら実装方法を考えなければならないかと思います。
伝わりにくい表現で申し訳ございませんでした。
江田様
お世話になっております。
ススムです。
教えて頂きましたコードで無事表示することができました。
また、私がイメージしていた内容でしたので、私のほうが
ちゃんとイメージをお伝えできなく申し訳ございませんでした。
今後とも宜しくお願い致します。