☰

Clipboard image upload patch in Bahamut forum

Automatically upload image to Bahamut when you paste images in forum editor.

// ==UserScript==
// @name         Clipboard image upload patch in Bahamut forum
// @name:zh-TW   巴哈姆特論壇區剪貼簿圖片上傳補丁
// @namespace    https://jtdjdu6868.com/
// @version      1.2
// @description        Automatically upload image to Bahamut when you paste images in forum editor.
// @description:zh-TW  在編輯討論區文章時貼上支援的圖片格式，自動上傳至巴哈圖庫
// @author       jtdjdu6868
// @match        https://forum.gamer.com.tw/post1.php*
// @match        https://forum.gamer.com.tw/C.php*
// @match        https://forum.gamer.com.tw/Co.php*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=gamer.com.tw
// @grant        none
// @run-at       document-idle
// @license      BY
// ==/UserScript==

(function() {
    'use strict';
    function pasteHandler(e)
    {
        const editor = this;
        const items = (e.clipboardData || e.originalEvent.clipboardData).items;
        for(let i = 0; i < items.length; ++i)
        {
            if("image/gif,image/jpeg,image/png,image/webp".split(",").includes(items[i].type))
            {
                e.preventDefault();
                console.log("paste image");
                toastr.info("上傳中...");

                const blob = items[i].getAsFile();
                const bsn = +new URL(window.location.href).searchParams.get("bsn");

                // get upload token (piccToken)
                fetch(`https://api.gamer.com.tw/forum/v1/image_token.php?bsn=${bsn}`, {
                    credentials: "include",
                }).then((res) => res.json()).then((res) => {
                    if(res.code !== void 0 && res.message || res.error)
                    {
                        throw res.message || res.error.message;
                    }
                    const piccToken = res.token || res.data.token;
                    return piccToken;
                }).then((piccToken) => {
                    // pack payload
                    const payload = new FormData();
                    payload.append("token", piccToken);
                    payload.append("dzfile", blob);

                    return payload;
                }).then((payload) => {

                    // upload payoad with piccToken
                    // use xhr because server returns a readablestream, xhr is more simpler
                    return new Promise((resolve, reject) => {
                        const xhr = new XMLHttpRequest();
                        xhr.open("POST", "https://picc.gamer.com.tw/ajax/truth_image_upload.php", true);
                        xhr.withCredentials = true;
                        xhr.onload = (e) => {
                            // return image token
                            resolve(e.target.responseText);
                        };

                        const headers = {
                            "Accept": "application/json",
                            "Cache-Control": "no-cache",
                            "X-Requested-With": "XMLHttpRequest"
                        };
                        Object.keys(headers).forEach((key) => xhr.setRequestHeader(key, headers[key]));

                        xhr.send(payload);
                    });
                }).then((res) => JSON.parse(res)).then((res) => {
                    if(res.token === void 0)
                    {
                        throw res;
                    }

                    // get image url by token
                    return fetch(`https://api.gamer.com.tw/forum/v1/image_upload.php?token=${res.token}&bsn=${bsn}`, {
                        credentials: "include",
                    });
                }).then((res) => res.json()).then((res) => {
                    // receive url
                    if(res.code !== void 0 && res.message || res.error)
                    {
                        throw res.message || res.error.message;
                    }
                    let urlList = res.data ? res.data.list : res;

                    // extract first url
                    return urlList[0];
                }).then((url) => {
                    toastr.clear();
                    toastr.success("上傳成功");

                    // insert
                    if(editor.isContentEditable)
                    {
                        // event from RTF or source code
                        if(!bahaRte.isPlainText)
                        {
                            // RTF
                            bahaRte.doc.execCommand("insertImage", false, url);
                            Forum.Editor.detectThumbnail();
                        }
                    }
                    else if(editor.id === "source")
                    {
                        // source code in post1.php editor
                        if(bahaRte.isPlainText)
                        {
                            document.execCommand("insertText", false, `[img=${url}]`);
                            Forum.Editor.detectThumbnail();
                        }
                    }
                    else if(editor.tagName === "TEXTAREA" || editor.tagName === "INPUT" && editor.type === "text")
                    {
                        // event from comment or some unknown input text

                        // insertText supports native undo, but baha offcial insert uses set content
                        // document.execCommand("insertText", false, url);
                        const selStart = editor.selectionStart,
                              selEnd = editor.selectionEnd;
                        const before = editor.value.substring(0, selStart),
                              after = editor.value.substring(selEnd);
                        editor.value = before + url + after;
                        editor.focus();
                        editor.selectionStart = selStart;
                        editor.selectionEnd = selStart + url.length;
                    }
                    else
                    {
                        console.log("editor unknown");
                    }
                }).catch((err) => {
                    toastr.clear();
                    toastr.error(err);
                });
            }
            else if(items[i].type.indexOf('image') === 0)
            {
                // unsupported image type
                toastr.warning("目前巴哈圖庫只支援png, jpg, gif, webp");
                e.preventDefault();
            }
        }
    };

    // bind event after bahaRte loaded
    jQuery(window).on('load', () => {
        bahaRte.doc.body.addEventListener("paste", pasteHandler);
        document.getElementById("source")?.addEventListener?.("paste", pasteHandler);
        document.querySelectorAll(".reply-input textarea").forEach((canEdit) => canEdit.addEventListener("paste", pasteHandler));
    });
})();