要在 alpine 上自訂上傳按鈕，只要透過在別的物件上偵測事件後去觸發上傳按鈕的點擊事件就可以了。

我們這邊準備 HTML 如下：

<div class="container" x-data="">
     <div class="py-2">
       <button class="btn btn-info" @click="$refs.photo.click()">選擇</button>
     </div>
     <input x-ref="photo" type="file" >
</div>

我們在 input type="file" 上增加 x-ref="photo"，之後再按鈕上透過 click 事件去讓 $refs.photo 執行 click 事件就可以了。

這樣我們點擊按鈕後，就會讓跳出視窗讓我們去選擇檔案了。

那如果我們要去顯示選擇的檔案名稱，可以去偵測 file 改變之後，修改取得的物件的內容後顯示他的檔名：

x-on:change="files = Object.values($event.target.files)"

 

<div class="container" x-data="{
        files: null
    }">
     <div class="py-2">
       <button class="btn btn-info" @click="$refs.photo.click()">選擇</button>
     </div>
     <input x-ref="photo" type="file" 
     x-on:change="files = Object.values($event.target.files)">
     <div class="py-2" >
        <span x-text="files ? files.map(file => file.name).join(', ') : 'Choose single file...'"></span>
     </div>
</div>

 

參考：
Alpine JS File Upload