# 第七堂 Firebase 檔案與空間上傳
* 錄影
* [Firebase Storage 官網文件](https://firebase.google.com/docs/storage/web/start?hl=zh-tw)
* [Adobe XD 設計稿](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/grid)
* [範例程式碼](https://github.com/gonsakon/express-week4-sample/tree/feature/firebaseStorage)
* [Ray 教練文件](https://israynotarray.com/nodejs/20221225/1867465275/)

## 看懂這張圖，就知道傳輸邏輯

## 常見 QA

Q：要欄位+ 檔案一次傳送？還是檔案先上傳？([範例](https://xd.adobe.com/view/c0763dbe-fc15-42e8-be0b-8956ed03e675-9525/screen/c328cf8f-1de3-4de6-b944-245959af7dd0/))

## multer
* express 所設計的 middleware
* [multer 官方文件](https://github.com/expressjs/multer)
* [簡體教學](https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md)

## 操作步驟

1. 加入 `multer`、`uuid`、`firebase-admin` NPM
2. 開啟一個 [Firebase](https://firebase.google.com/) 專案
3. 建立 ENV 檔，放入環境變數，並新增一個 `firebase.js` 設置 firebase 環境初始化
4. 設置一個 `images.js` 的 middleware，來過濾資訊
5. 在 `app.js`，設置一個 `upload.js` router
6. 在 upload.js 設置整合 Firebase 上傳功能