blog/public/plugin/editor/tinymce/plupload/js/plupload.config.js

let thumbList = [];
let thumbLength = 0;
let uploaderFuncUrl = (top.BASE_URL + "");
let $parent = (top || top.parent);

let uploader = new plupload.Uploader({
    runtimes: "html5,html4,silverlight,flash",
    browse_button: "image-upload",
    container: "container",
    chunk_size: "10000kb",
    unique_names: false,
    selected_files: 8, // 한번에 선택한 파일 개수
    max_files: 30, // 전체 파일 개수 제한
    urlstream_upload: true,
    multi_selection: true,
    multipart_params: [],

    url: uploaderFuncUrl,
    flash_swf_url: $parent.tinyMCE.baseURL + '/plupload/js/Moxie.swf',
    silverlight_xap_url: $parent.tinyMCE.baseURL + '/plupload/js/Moxie.xap',

    resize: {
        // width: $parent.tinyMCE.activeEditor.getContainer().offsetWidth,
        // height: $parent.tinyMCE.activeEditor.getContainer().offsetHeight,
        crop: false,
        quality: 100
    },

    filters: {
        max_file_size: "10mb",
        mime_types: [{
            title: "Image files",
            extensions: "jpg,gif,png,bmp"
        }],
        prevent_duplicates: true
    },

    init:
        {
            // 초기 설정
            PostInit: function (up) {
                if (up.state !== 1) {
                    $parent.message("잠시후 다시 시도해주세요.", "error");
                    return false;
                }

                document.getElementsByClassName("picker-content")[0].innerHTML = "";
                $(".picker-content").sortable({
                    start: function (event, ui) {
                        ui.placeholder.css({visibility: 'visible', border: '1px solid #4D88FF'});
                    },
                    change: function (event, ui) {
                        ui.placeholder.css({visibility: 'visible', border: '1px solid #4D88FF'});
                    },
                    stop: function (event, ui) {
                        sortFiles();
                    }
                }).disableSelection();
            },

            // 파일 필터 중
            FileFiltered: function (up, files) {
                if (up.files.length > 0) {
                    up.files.forEach(function (n) {
                        if (!(/(\.jpg|\.gif|\.png|\.bmp)$/i.test(n.name))) {
                            alert("첨부하신 파일은 허용되지 않는 확장자입니다.");
                        }
                    });
                }
                if (!files) {
                    up.removeFile(files);
                    $parent.message("사진를 추가할 수 없습니다. 다시 시도 해주세요.", "error");
                    return false;
                }
            },

            // 업로드 전 보낼 값 지정
            BeforeUpload: function (up, file) {
                up.settings.multipart_params = {fileID: file.id};
            },

            // 파일 가상추가
            // up.state (1: stoped, 2: started) plupload resize
            FilesAdded: function (up, files) {
                if (files.length > up.settings.selected_files) {
                    $parent.message("사진는 한번에 " + up.settings.selected_files + "개까지 올릴 수 있습니다.", "error");
                    return false;
                }

                // 최대 업로드 가능 개수
                plupload.each(files, function (file) {
                    try {
                        if (file.getSource().getSource().size <= 0) {
                            throw new Error("파일 형식이 옳지 않습니다.");
                        } else if (up.files.length > up.settings.max_files) {
                            throw new Error("사진는 최대 " + up.settings.max_files + "개 까지 가능합니다.");
                        }
                    } catch (error) {
                        $parent.popMessage(error.message, "error");
                        up.removeFile(file);
                        up.refresh();
                        return false;
                    }

                    if (up.state !== plupload.STARTED) {
                        let preView = new moxie.image.Image();
                        let params = up.settings.resize;
                        let blob = file.getSource();

                        try { // mOxie 미리보기 생성
                            preView.onload = function () // 이미지 썸네일 생성
                            {
                                /*
                                console.log("params.width: " + params.width);
                                console.log("params.width: " + params.height);
                                console.log("this.width: " + this.width);
                                console.log("this.width: " + this.height);
                                console.log("params.preserve_headers: " + params.preserve_headers);
                                console.log("params.crop: " + params.crop);
                                */
                                if ((params.width > this.width) && (params.preserve_headers && !params.crop)) {

                                } else {
                                    preView.downsize(params.width, params.height, params.crop, params.preserve_headers); // 크기가 지정한 값보다 크다면 조절
                                }

                                paintImg(file, preView.getAsDataURL(blob.type, params.quality));
                            };

                            preView.onresize = function (e) {
                                $parent.popMessage("`" + e.target.name + "` 이미지는 허용 가능한 크기를 초과해 재조정하였습니다.", "warning");
                            };
                            preView.onerror = function () {
                                this.destroy();
                            };
                            preView.onloadend = function () {
                                this.destroy();
                            };
                            preView.load(blob);

                            // 미리보기 생성이 안된다면
                            if (file.type === "image/gif" && preView.size <= 0) {
                                var reader = new FileReader();
                                reader.onloadend = function () {
                                    if (reader.result) {
                                        paintImg(file, reader.result);
                                    }
                                };
                                reader.readAsDataURL(file.getNative());
                            }

                        } catch (e) {
                            $parent.popMessage("`" + e.target.name + "` 이미지는 첨부할 수 없습니다.", "error");
                            return false;
                        }
                    }
                });
                up.refresh();
            },

            // 업로드 중..
            UploadProgress: function (up, files) {
                loading();
            },

            // 실제 사진 업로드
            FileUploaded: function (up, file, response) { // 사용안함
                let data = JSON.parse(response.response);
                try {
                    if (typeof data != "undefined" && data != "") {
                        if (file.id && up.state == plupload.STARTED) {
                            let editorHTML = "<img src='" + data.imageUrl + "?" + Date.now() + "' alt='" + data.imageName + "'/><br /> \u200C";
                            $parent.tinymce.activeEditor.execCommand('mceInsertContent', false, editorHTML);

                            // 이미지 번호 저장
                            /*
                            if(typeof data.imageID != "undefined" || data.imageID == null){
                                $parent.setImageID(data.imageID);
                            }*/
                        } else {
                            throw new Error("사진 업로드 중 오류가 발생하였습니다. 다시 시도해주세요.");
                        }
                    } else {
                        throw new Error("첨부한 사진은 사용할 수 없습니다. 다른 사진을 사용해주세요.");
                    }
                } catch (error) {
                    $parent.message(error.message, "error");
                    up.removeFile(file);
                    up.splice(file);
                    return false;
                }
            },

            FilesRemoved: function(up, files) {
                console.log(up);
                console.log(files);
            },

            // 모든 사진 업로드 완료
            UploadComplete: function (up, files) {
                if (up.total.queued == 0 && up.files.length > 0) {
                    $parent.message(up.files.length + "개의 사진이 추가 되었습니다.");
                }
                stopUploader();
            },

            // 오류 노출
            Error: function (up, error) {
                if (error.code == 9999) {
                    $parent.message("\nError #" + error.code + ": " + error.message, "error");
                }
                return false;
            }
        }
});

uploader.init();

/*
 * Tinymce 내부 호출
 */
window.startUploader = function () {
    if (uploader.files.length > 0) {
        uploader.start();
    } else {
        stopUploader();
    }
};

window.stopUploader = function () {
    setTimeout(function () {
        uploader.refresh();
        uploader.stop();
        uploader.unbindAll();
        uploader.destroy();
    }, 1000);

    setTimeout(function () {
        $parent.selfAutoResize(15);
    }, 0);
    setTimeout(function () {
        $parent.tinymce.activeEditor.load();
    }, 500);
    // setTimeout(function(){$parent.tinymce.activeEditor.execCommand('mceAutoResize', true);}, 1000);
    loading();
    $parent.tinyMCE.activeEditor.windowManager.close();
};

window.insertContent = function () {
    if (thumbLength > 0) {
        loading();
        for (let index in thumbList) {
            $parent.tinymce.activeEditor.execCommand('mceInsertContent', false, thumbList[index]);
        }
        $parent.message(thumbLength + "개의 사진이 추가 되었습니다.");
    }
    stopUploader();
};

window.removeThumb = function (e) {
    if ($(".picker-list-box").length <= 0) {
        $parent.popMessage("삭제할 파일이 없습니다.", "warning");
        return false;
    } else {
        if (typeof e != "undefined") {
            if (confirm("지워진 사진은 복구할 수 없습니다.\n\n해당 사진을 삭제하겠습니까?")) {
                let removeTab = e.closest(".picker-list-box");
                let fileID = removeTab.attr("id");
                delete thumbList[fileID];
                removeTab.remove();
                uploader.removeFile(uploader.getFile(fileID));
                $parent.popMessage("해당 사진이 정상적으로 삭제 되었습니다.");
                thumbLength--;
            }
        } else {
            if (confirm("지워진 사진들은 복구할 수 없습니다.\n\n모든 사진을 삭제하겠습니까?")) {
                uploader.splice(); // 초기화
                uploader.refresh();
                $(".picker-content").empty();
                thumbLength = 0;
                thumbList = new Array(); // 삭제
                $parent.popMessage("모든 사진이 정상적으로 삭제 되었습니다.");
            }
        }
        return true;
    }
};

/*
 * Plupload 내부 호출
 */
let sortFiles = function () {
    let fileListObj = $(".picker-list-box");
    let tmpFileList = [];
    let tmpThumbList = [];

    $.each(fileListObj, function (index) {
        if (typeof this.id != "undefined") {
            tmpFileList.push(uploader.getFile(this.id));
            tmpThumbList[this.id] = thumbList[this.id];
        }
    });

    $.each(uploader.files, function (index) {
        uploader.files[index] = tmpFileList[index];
    });

    thumbList = tmpThumbList;
    uploader.refresh();
};

let loading = function () {
    // 레이어 팝업 기능
    let temp = $('.wrap-loading');
    let bg = temp.prev(); // dimmed 레이어를 감지하기 위한 boolean 변수

    if (bg) {
        $('.layer').show(); // 'bg' 클래스가 존재하면 레이어가 나타나고 배경은 dimmed 된다.
        temp.show();
    } else {
        $('.layer').hide();
        temp.hide();
    }

    // 화면의 중앙에 레이어를 띄운다.
    if (temp.outerHeight() < $(document).height()) {
        temp.css('margin-top', '-' + (temp.outerHeight() / 2 - 26) + 'px');
    } else {
        temp.css('top', '0');
    }

    if (temp.outerWidth() < $(document).width()) {
        temp.css('margin-left', '-' + (temp.outerWidth() / 2 - 25) + 'px');
    } else {
        temp.css('left', '0');
    }
};

let paintImg = function (file, src) {
    let imgHTML = `<img src="${src}" width="100%" alt="${file.name}" aria-label="image" data-load-type="valign" data-target="thumb"/>`;
    let thumbHTML = `<div class="picker-list-box picker-sortable-item active" id="${file.id}">
                        <div class="picker-list-item">
                            <div class="picker-list-item-in">
                                <div class="picker-image-box">
                                    <a href="#" class="picker-image" aria-label="Enlarge" onclick="return false;">${imgHTML}</a>
                                </div>
                                <a href="#" class="picker-image-title picker-image-draggable" aria-label="Name" onclick="return false;">${file.name}</a>
                                <button type="button" class="picker-image-remove mce-close" aria-hidden="true" aria-label="Remove">
                                    <i class="mce-ico mce-i-remove"></i>
                                </button>
                            </div>
                        </div>
                    </div>`
    document.getElementsByClassName("picker-content")[0].innerHTML += thumbHTML;
    thumbList[file.id] = "<br/>" + imgHTML; // 썸네일 이미지 임시저장 (에디터에 뿌려줌)
    thumbLength++;
};

let resizeImage = function (blob, params, cb) {
    try {
        let img = new o.Image();
        img.onload = function () {
            // no manipulation required if...
            if (params.width > this.width &&
                params.height > this.height &&
                params.quality === undef &&
                params.preserve_headers &&
                !params.crop
            ) {
                this.destroy();
                return cb(blob);
            }
            // otherwise downsize
            img.downsize(params.width, params.height, params.crop, params.preserve_headers);
            console.log(img.getAsDataURL());
            paintImg(blob, img.getAsDataURL());
        };

        img.onresize = function () {
            cb(this.getAsBlob(blob.type, params.quality));
            this.destroy();
        };

        img.onerror = function () {
            cb(blob);
        };

        img.load(blob);
    } catch (ex) {
        cb(blob);
    }
}