先前示範過「操作 Github API 上傳檔案」的作法,這次介紹如何操作 API 上傳檔案到 Google Drive。
實際上,如果真的使用 Google Drive API 來上傳檔案有些麻煩,因為需要走 oAuth2 驗證權限、每次都需取得 Access Token 金鑰,整個流程的步驟太多,說明起來複雜。
本篇找到的流程相對比較簡易,不需處理 oAuth2、Access Token,直接寫 Apps Script 就能從前端上傳檔案到 Google Drive,並取得檔案連結,以下來看如何進行。
首先選定一個 Google Drive 存放檔案的路徑,進入該目錄之後,網址格式大致是這樣子:
請記下自己的紅字「目錄 ID」字串,之後會用到。
1. 撰寫 Apps Script 指令碼
進入「Google Drive」→ 按左上角「新增」→ 更多 → Google Apps Script
指令碼內容如下:
2. 取得授權
儲存之後,或是第一次執行之前,系統會彈出要求授權的視窗,這個流程有好幾個步驟,詳細的圖文說明可參考「Google 試算表製作可執行 Apps Script 指令碼的按鈕」→「三、撰寫 Apps Script 指令碼」這裡的授權流程。
3. 發佈指令碼
最後要將指令碼發佈到網路上成為應用程式,供前端呼叫,操作流程如下:
接著視窗上會顯示「目前的網路應用程式網址」,網址格式如下:
請記下自己的「網路應用程式網址」,之後會用到。
接著前端使用以下範例程式碼,即可上傳檔案到 Google Drive,並立即取得檔案連結:
實際上,如果真的使用 Google Drive API 來上傳檔案有些麻煩,因為需要走 oAuth2 驗證權限、每次都需取得 Access Token 金鑰,整個流程的步驟太多,說明起來複雜。
本篇找到的流程相對比較簡易,不需處理 oAuth2、Access Token,直接寫 Apps Script 就能從前端上傳檔案到 Google Drive,並取得檔案連結,以下來看如何進行。
一、指定 Google Drive 上傳資料夾
首先選定一個 Google Drive 存放檔案的路徑,進入該目錄之後,網址格式大致是這樣子:
https://drive.google.com/drive/folders/目錄 ID
請記下自己的紅字「目錄 ID」字串,之後會用到。
二、操作 Apps Script 指令碼
1. 撰寫 Apps Script 指令碼
進入「Google Drive」→ 按左上角「新增」→ 更多 → Google Apps Script
指令碼內容如下:
var folderId = "目錄 ID 字串",
folder = DriveApp.getFolderById(folderId);
function doGet(e) {
var para = e.parameter,
fileName = para.fileName,
fileType = para.fileType,
base64Data = para.base64Data;
return getFileUrl(fileName, fileType, base64Data);
}
function getFileUrl(fileName, fileType, base64Data) {
var data = Utilities.base64Decode(base64Data),
blob = Utilities.newBlob(data, fileType, fileName),
file = folder.createFile(blob),
fileUrl = file.getUrl();
return ContentService.createTextOutput(fileUrl);
}
- 紅字請替換為自己 Google Drive 存放檔案資料夾的「目錄 ID」字串
- 上傳到 Google Drive 的檔案需先將 base64 編碼格式的內容作處理,轉換為 blob 格式
- 接著使用官方提供的 DriveApp 就能非常簡單的操作上傳檔案,存放到指定路徑
2. 取得授權
儲存之後,或是第一次執行之前,系統會彈出要求授權的視窗,這個流程有好幾個步驟,詳細的圖文說明可參考「Google 試算表製作可執行 Apps Script 指令碼的按鈕」→「三、撰寫 Apps Script 指令碼」這裡的授權流程。
3. 發佈指令碼
最後要將指令碼發佈到網路上成為應用程式,供前端呼叫,操作流程如下:
- 檔案 → 管理版本
- 輸入描述內容 → 按「儲存新版本」 → 確定
- 發佈 → 部署為網路應用程式 → 選擇版本
- 將應用程式執行為:「我」
- 具有應用程式存取權的使用者:「任何人,甚至是匿名使用者」
- 按「部署」
接著視窗上會顯示「目前的網路應用程式網址」,網址格式如下:
https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxx/exec
請記下自己的「網路應用程式網址」,之後會用到。
三、前端 HTML / JS 範例
接著前端使用以下範例程式碼,即可上傳檔案到 Google Drive,並立即取得檔案連結:
- 紅字請替換為自己的「網路應用程式網址」
- 操作 input 取得檔案內容的原理,可參考「HTML5 File API 讀取檔案內容」
- 重要的是利用 File API,分別取出檔案名、檔案格式、base64 格式編碼內容
- 上傳成功後,會在 #fileUrl 這個地方顯示 Google Drive 檔案路徑
更多 Google Apps Script 相關技巧: