# 範例： 客製化上傳按鈕
這個範例會介紹如何客制上傳按鈕的功能

## 效果展示


## 初始化客製按鈕

在 webchat 打開時來客製按鈕

let alreadyCustomize = false
var sub = function (state) {
   if (state === 'open' && !alreadyCustomize) {
         alreadyCustomize = true
         const iconUrl = 'https://i.pinimg.com/originals/34/ed/17/34ed1783bb2ddd660686ac6a685270bf.jpg'
         customizeUploadButton(iconUrl)
   }
}
webChatAPI.WebChatToggleStateObservable.subscribe(sub);

* alreadyCustomize:檢視是不是第一次開啟 webchat
* iconUrl:如果需要客製化按鈕圖案需要提供按鈕照片網址

客製化上傳按鈕

function customizeUploadButton(iconUrl) {
   getDom().then(dom => {
         // 找到 dom 物件後在建立一個 div 來放客製化上傳的選項
         let parent = dom.parentNode;
         // 填入你自己設計的 div 的 id
         const div = document.getElementById('[yourDiv]')
         parent.insertBefore(div, dom);
         if (iconUrl) {
            let customButton = document.createElement('button');
            customButton.onclick = (e) => handleFolderOpen(e, div);
            customButton.style.cssText = "position: absolute;left:0;bottom:0;wdith:40px;height:39px;padding:0"
            customButton.innerHTML = `<img style="wdith:40px;height:39px" src='${iconUrl}'></img>`
            parent.appendChild(customButton)
         }
   })
}

處理 folder 開啟關閉狀態

function handleFolderOpen(e, parent) {
   e.stopPropagation()
   if (parent.style.display == "none") {
         parent.style.display = "block"
   } else {
         parent.style.display = "none"
   }
}

## 測試一下這個範例

> [測試範例](https://tdd-2012-2.gss.com.tw/WebChat/Samples/14.customize-upload-button/index.html)