檔案上傳流程
檔案不是選完就好；上傳是有狀態的流程。
選檔只是起點。格式與大小驗證、多檔案進度、失敗重試、取消與提交前確認，各自需要被看見，不能塞進一個「上傳」按鈕裡。
流程地圖
先分清楚使用者在上傳流程中的哪一步。
- 只是從裝置挑選檔案嗎？使用 File Input，先交代格式、大小、數量與選後結果。
- 需要讓人快速拖放多個檔案嗎？加入 Dropzone，但仍保留點擊選檔的替代入口。
- 同時有多筆檔案處於不同結果嗎？使用 Upload Queue，逐筆顯示等待、上傳、失敗、取消與重試。
- 是在追一筆傳輸，或確認一個檔案嗎？單檔傳輸用 Upload Progress；提交前確認內容用 File Preview。
比較表
上傳介面不是單一元件，而是一段可恢復的流程。
點選元件名稱可查看完整介紹、可操作 Demo、AI Prompt 與驗收清單。
| 比較面向 | File Input｜檔案選擇欄 | Dropzone｜拖放上傳區 | Upload Queue｜上傳佇列 | Upload Progress｜上傳進度 | File Preview｜檔案預覽 |
|---|---|---|---|---|---|
| 在流程中的責任 | 從裝置選取檔案 | 拖放或點擊加入檔案 | 管理多筆檔案的結果 | 回饋單一檔案傳輸狀態 | 確認已選檔案內容與身分 |
| 使用者最常問的事 | 可以選什麼檔案？ | 可以直接拖進來嗎？ | 哪一個失敗了？ | 還要等多久？可以取消嗎？ | 我選到的是這一份嗎？ |
| 典型狀態 | 空白、已選、驗證錯誤 | 預設、拖曳進入、驗證失敗 | 等待、上傳、完成、失敗、取消 | 等待、上傳、暫停、完成、失敗 | 可預覽、不可預覽、已移除 |
| 必備資訊 | 格式、大小、數量與檔名 | 拖放提示與點擊選檔替代入口 | 檔名、大小、逐筆狀態與重試 | 百分比、傳輸量、下一步操作 | 檔名、格式、大小與移除 |
| 不要誤當成 | 已經上傳成功 | 唯一的檔案選擇方式 | 只有一條總進度條 | 多檔案的完整管理畫面 | 不顯示檔案身分的漂亮縮圖 |
這組結論
拖進去不是完成，上傳成功也不是唯一結果。
好的檔案流程會讓人知道檔案能不能選、現在傳到哪裡、哪一筆失敗，以及下一步能重試、取消還是移除。Drag and Drop 可以加快操作，但不能成為唯一入口。
操作 Upload Queue Demo →