用react做簡易的上傳檔案(含拖拉)並預覽圖片
用最新的react custom hook，包含簡單的組件範例
Nov 13, 2020
前言
僅示範如何上傳、暫存和顯示預覽的圖片，相關上傳API(例如/upload)則依照你實作時的狀況自行調整用途。
備註：範例為使用react typescript撰寫，因為型別比較好檢視，如果是用純js的話，將型別去掉就可以了。
索引index
upload上傳
preview預覽圖片
drag & drop to upload拖拉檔案上傳
組件 & 整合
upload上傳
提供上傳限制的選項，如超過最大上傳數量會跳出window alert的提示喔。
uploadFetch.ts
負責處理upload的處理狀態，提供各種狀態(success, failed, 事前檢查…)的選項。
useUpload
在加入暫存檔案的state之前，先檢查是否超過上傳數量的最大值。
preview預覽檔案(圖片)
readFileList.ts
取得檔案之後(點擊上傳或是拖拉)之後，取得fileList資料之後，用FileReader的API負責「讀取檔案」，將讀取之後的預覽檔案暫存起來。
usePreviewImages.ts
純粹用於儲存預覽圖片的狀態。
drag & drop to upload拖拉檔案上傳
useDragDropFiles.ts
負責處理drag, drop事件監聽及判斷行為的觸發。
當檔案拖入組件內(drag in)時，檢查並更新isDragging；放下檔案時(drop)，檢查檔案並觸發清空drag相關的狀態；拖出組件範圍外(drag out)時，一樣將所有drag相關狀態清空。
組件 & 整合
組件
組件部分不介紹所有組件及細節，只介紹drag區域的組件是如何運作的。
DragDropFileBox.tsx
隨props.isDragging改變組件的背景顏色，讓使用者知道該區域是可以上傳的
整合
useUploadAndPreviewFiles.ts
將upload 和 preview整合起來，並加上handleSubmit上傳form data。
useUploadForm.ts
最後的hooks整合，加上API及相關參數。