WebUploader 在 Bootstrap Tab 非預設分頁中無法初始化的解決方案

問題現象

將 WebUploader 放入 Bootstrap 的 .tab-content 結構中，且該分頁非預設顯示（即 display: none 狀態）時，點擊「選擇檔案」按鈕無任何反應，無法彈出檔案選擇對話框。

根本原因

WebUploader 初始化時會綁定點擊事件並計算內部按鈕的幾何位置。若容器處於隱藏狀態（display: none），元素寬高為 0、座標不可計算，導致事件綁定失效或按鈕定位錯誤，進而無法觸發原生 <input type="file">。

解決策略：在分頁顯示瞬間重新初始化

利用 Bootstrap Tab 的 shown.bs.tab 事件，該事件在分頁切換動畫完成、內容真正可見時觸發。此時重新實例化 WebUploader 即可獲得正確的 DOM 尺寸與座標。

核心代碼

// 將初始化邏輯封裝為可複用函數
function initUploader() {
    var uploader = WebUploader.create({
        // ... 原有配置 ...
        pick: '#filePicker',
        // 重要：指定容器為當前可見的 tab-pane，避免多實例衝突
        container: '#product_gallary .uploader-container'
    });
    // 視專案需求保存實例供後續銷毀
    window.currentUploader = uploader;
}

// 監聽 Tab 切換
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // e.target 為被激活的  元素，其 href 屬性即目標 tab-pane 的 id
    var targetId = $(e.target).attr('href'); // 例如 "#product_gallary"
    
    // 僅在目標分頁需要上傳功能時初始化
    if (targetId === '#product_gallary') {
        // 若已有實例先銷毀，防止重複綁定
        if (window.currentUploader) {
            window.currentUploader.destroy();
        }
        initUploader();
    }
});

document.querySelectorAll('[data-bs-toggle="tab"]').forEach(el => {
    el.addEventListener('shown.bs.tab', e => { /* 同邏輯 */ });
});