ファイル添付時にサムネイルを表示させる強化ガジェット

フォームで画像ファイルを添付した際にサムネイルを表示する強化ガジェットを作成しました。
ビジュアル設定で使用できる形にしていますので、ぜひ参考にしてください。

仕様

・JavaScript で送信しているため、対応していないブラウザがあります。
・DOMの変更を監視し、値が変更された場合にサムネイル表示・削除を実行しています。
・jpg,jpeg,png,gif,svg,webp に対応しています。
・ビジュアル設定が前提となりますので、ソース設定にてタグ構成を変更した場合動作しない可能性がございます。
・ファイル添付にて複数の画像を同時に表示させる場合、正しく動作しない可能性がございます。
・heic には対応していないのでご注意ください。

設定方法

ページの JavaScript タブにコードを貼り付けて、設定値を変更してください。

JavaScript

// 設定値
var thumbnail_fileFieldName = [''];
var thumbnail_height = '150px';
var thumbnail_width = '';
var thumbnail_conf_view = true;


// 原則変更不可
// 複数強化パーツがある場合、変更あり
window.onload = function () {
    thumbnail_view();
};

/// 変更不可
// 複数強化パーツがある場合、下記を変更不可箇所に追加

function thumbnail_view() {
    var input = false;

    thumbnail_fileFieldName.forEach(function(fileField){
        let target = document.getElementsByName(fileField)[0];
        if(target){
            input = true;
            var val = target.value;
            if(val){
                let file_url = JSON.parse(val);
                for (let key in file_url) {
                    if(document.getElementById(fileField+"thumbnailImg-"+key) == null){
                        let file_type = file_url[key]["fileName"].split('.').pop();
                        if(file_type == "svg"){
                            fetch(file_url[key]["fileUrl"], {}).then(function(response) {
                                return response.text();
                            }).then(function(data) {
                                const parser = new DOMParser();
                                const doc = parser.parseFromString(data, "text/html");
                                var img_element = doc.querySelector("svg");
                                img_element.style.padding = "10px 5px";
                                img_element.classList = fileField+"ThumbnailImg";     
                                if(thumbnail_height){
                                    img_element.style.height = thumbnail_height;
                                }
                                if(thumbnail_width){
                                    img_element.style.width = thumbnail_width;
                                }
                                target.before(img_element);
                            });
                        }else if(file_type == "jpg" || file_type == "jpeg" || file_type == "png" || file_type == "gif" || file_type == "webp" || 
                        file_type == "JPG" || file_type == "JPEG" || file_type == "PNG" || file_type == "GIF" || file_type == "WEBP"){
                            
                            var img_element = document.createElement('img');
                            img_element.src = file_url[key]["fileUrl"];
                            img_element.id = fileField+"thumbnailImg-"+key;
                            img_element.classList = fileField+"ThumbnailImg";
                            img_element.style.padding = "10px 5px";
                            if(thumbnail_height){
                                img_element.style.height = thumbnail_height;
                            }
                            if(thumbnail_width){
                                img_element.style.width = thumbnail_width;
                            }
                            target.before(img_element);
                        }
                    }
                };
            }
        }
    });
    if(thumbnail_conf_view && input == false){
        const elm = document.getElementsByClassName("sp-form-file-bold-link");
        if (0 < elm.length) {
            [...elm].forEach(function(v){ 
                var img_element = null;
                var img_element = document.createElement('img');
                img_element.src = v.href;
                img_element.style.padding = "10px 5px";
                if(thumbnail_height){
                    img_element.style.height = thumbnail_height;
                }
                if(thumbnail_width){
                    img_element.style.width = thumbnail_width;
                }
                var parant = v.closest(".sp-flex");
                parant.after(img_element);
            })
        }
    }
}
window.addEventListener('DOMContentLoaded', function(e){
    thumbnail_fileFieldName.forEach(function(fileField){
        let target = document.getElementsByName(fileField)[0];
        if(target){            
            let config = {attributes : true}; 
            let observer = new MutationObserver(mutations => {
                var val = target.value;
                if(val){
                    const elm = document.getElementsByClassName(fileField+"ThumbnailImg");
                    if (0 < elm.length) {
                        [...elm].forEach(function(v){ return v.remove() })
                    }
                    let file_url = JSON.parse(val);
                    for (let key in file_url) {
                        if(document.getElementById(fileField+"thumbnailImg-"+key) == null){
                            let file_type = file_url[key]["fileName"].split('.').pop();
                            if(file_type == "svg"){
                                fetch(file_url[key]["fileUrl"], {}).then(function(response) {
                                    return response.text();
                                }).then(function(data) {
                                    const parser = new DOMParser();
                                    const doc = parser.parseFromString(data, "text/html");
                                    var img_element = doc.querySelector("svg");
                                    img_element.style.padding = "10px 5px";
                                    img_element.classList = fileField+"ThumbnailImg";     
                                    if(thumbnail_height){
                                        img_element.style.height = thumbnail_height;
                                    }
                                    if(thumbnail_width){
                                        img_element.style.width = thumbnail_width;
                                    }
                                    target.before(img_element);
                                });
                            }else if(file_type == "jpg" || file_type == "jpeg" || file_type == "png" || file_type == "gif" || file_type == "webp" || 
                            file_type == "JPG" || file_type == "JPEG" || file_type == "PNG" || file_type == "GIF" || file_type == "WEBP"){
                                
                                var img_element = document.createElement('img');
                                img_element.src = file_url[key]["fileUrl"];
                                img_element.id = fileField+"thumbnailImg-"+key;
                                img_element.classList = fileField+"ThumbnailImg";
                                img_element.style.padding = "10px 5px";
                                if(thumbnail_height){
                                    img_element.style.height = thumbnail_height;
                                }
                                if(thumbnail_width){
                                    img_element.style.width = thumbnail_width;
                                }
                                target.before(img_element);
                            }
                        }
                    };
                }else{
                    const elm = document.getElementsByClassName(fileField+"ThumbnailImg");
                    if (0 < elm.length) {
                        [...elm].forEach(function(v){ return v.remove() })
                    }
                }
            }); 
            observer.observe(target, config);
        }
    });
}, {once: true});

設定値は３ヶ所となります。

thumbnail_fileFieldName	サムネイルを表示させるファイルフィールドのname値を設定します複数フィールド存在する場合、「,」区切りで設定してください例）['f01','f02']
thumbnail_height	表示されるサムネイルの高さを指定します指定しない場合、空のままにしてくださいサイズを制限しない場合、サイズによってはデザインが崩れる可能性がございます 150px 程度を推奨しております
thumbnail_width	表示されるサムネイルの横幅を指定します指定しない場合、空のままにしてください縮尺を考慮して高さのみ指定する形を推奨しております
thumbnail_conf_view	確認画面でサムネイルを表示する場合、true を指定します表示しない場合、false にしてください

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
不具合やほかのやり方が知りたい等あれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ

仕様

設定方法

最後に

関連記事