前端操作 Apps Script 上傳檔案到 Google Drive 並取得連結﹍實作範例

先前示範過「操作 Github API 上傳檔案」的作法，這次介紹如何操作 API 上傳檔案到 Google Drive。

實際上，如果真的使用 Google Drive API 來上傳檔案有些麻煩，因為需要走 oAuth2 驗證權限、每次都需取得 Access Token 金鑰，整個流程的步驟太多，說明起來複雜。

本篇找到的流程相對比較簡易，不需處理 oAuth2、Access Token，直接寫 Apps Script 就能從前端上傳檔案到 Google Drive，並取得檔案連結，以下來看如何進行。

一、準備動作

1. 指定 Google Drive 上傳資料夾

首先選定一個 Google Drive 存放檔案的路徑，進入該目錄之後，網址格式大致是這樣子：

https://drive.google.com/drive/folders/目錄 ID
請記下自己的紅字「目錄 ID」字串，之後會用到。


2. 處理 Drive API 授權

在 Google Apps Script 指令碼的頁面，從選單的「資源」→「進階 Google 服務」→ 往下捲到 Drive API，啟用這個 API。

之後就可直接在 GAS 直接呼叫 Drive API，不必處理身份驗證。

二、操作 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 相關技巧：