如何建立可以上傳檔案的Google表單 (How to create a file upload form with google script)

因為某個人問我你知道google form 怎麼加入上傳檔案的欄位嗎?

找了其他線上產生表單的服務 typeform, jotform 不是要錢就是有限容量,後來發現 google script 可以編輯程式。

本來以為可以在google form 加入上傳檔案,後來失敗了(可能剛用不太懂,有人會可以告訴我:))。

爬文爬到一個滿清楚關於如何用 google script 讓任何人都可以上傳檔案到雲端硬碟的文章

稍微修改了一下 ,改成可以上傳檔案到雲端其他表單填寫的資料到會寫到試算表的功能。

下面從最開始說明,如果沒興趣可以直接點開副本使用。

開始使用google script

先把 Google Apps Script 加入 就可以開始創建

點選新增連結更多應用程式

開始新專案

一開始會看到這個畫面

把下面程式碼取代這部分

function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(form) {
try {

var folderName = "上傳區";
var sheetName = "上傳名單";
var folder;
var folders = DriveApp.getFoldersByName(folderName);

if (folders.hasNext()) {
folder = folders.next();
} else {
//如果資料夾不存在,自動建立
folder = DriveApp.createFolder(folderName);
}
//handling uploading file
var blob = form.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by "+ form.myName+" - " + form.myEmail + "("+ form.myTel +")" );

var fileUrl = file.getUrl();

//尋找雲端硬碟是否有這個檔案
var FileIterator = DriveApp.getFilesByName(sheetName);
var sheetApp = "";
while (FileIterator.hasNext())
{
var sheetFile = FileIterator.next();
if (sheetFile.getName() == sheetName)
{
// 如果有這個資料表就把它打開
sheetApp = SpreadsheetApp.open(sheetFile);
}
}
//如果沒有就建立一個新的
if(sheetApp == "")
{
sheetApp = SpreadsheetApp.create(sheetName);
}
// 讀取第一個sheets找到最後一行
var sheet = sheetApp.getSheets()[0];
var lastRow = sheet.getLastRow();
// 寫入新的資料
var targetRange = sheet.getRange(lastRow+1, 1, 1, 4).setValues([[form.myName,form.myEmail,form.myTel,fileUrl]]);

return "檔案上傳成功!"

} catch (error) {

return "檔案上傳失敗! 原因:"+error.toString();
}

}

之後在新增一個HTML檔案,注意檔案名需要跟function doGet () 裡面的一樣

<!DOCTYPE html>
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<script src="//cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script>
function fileUploaded(status) {
$('form').hide();
$('#output').html(status);
}
</script>
<body>
<div class='container'>
<h1>街口上傳</h1>
<form>
<fieldset class="form-group">
<label for="myName">姓名</label>
<input type="text" name="myName" class="form-control" id="myName" placeholder="請輸入姓名">
</fieldset>
<fieldset class="form-group">
<label for="myEmail">Email</label>
<input type="email" name="myEmail" class="form-control" id="myEmail" placeholder="請輸入Email">
</fieldset>
<fieldset class="form-group">
<label for="myTel">電話</label>
<input type="tel" name="myTel" class="form-control" id="myTel" placeholder="請輸入電話">
</fieldset>
<fieldset class="form-group">
<label for="exampleInputFile">File input</label>
<input name="myFile" type="file" class="form-control-file" id="exampleInputFile">
<small class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset>
<button type="submit" class="btn btn-primary" onclick="$('#output').html('上傳中...');
google.script.run.withSuccessHandler(fileUploaded)
.uploadFiles(this.parentNode);
return false;">送出</button>
</form>
<div id="output"></div>
</div>
</body>
</html>

基本上到這裡已經完成,接這只要點選發布 > 部署為網路應用程式 就會看到以下畫面。

需要注意的地方是,每次更新最好新增一個新的專案版本,不然連接的網址內容有可能不會更新。

發佈記得更新版本

應用程式存取權記得改成任何人,別人才能使用。

完成

html可以自行修改,這套用了bootstrap 還算美觀。

表單畫面

有人填寫後就會在雲端硬碟發現一個資料夾跟試算表。

後記

在想要寫入試算表(Spreadsheet)的時候遇到一點問題,一開始使用直接使用SpreadsheetApp.create()會造成每次都新增一份試算表。後來想加入一些判斷,如果檔案存在就直接讀取,但是沒有找到可以直接讀取檔案名的函數。所以先用DriveApp透過檔案名找到檔案在打開試算表。

Apps Script reference(函數文件):https://developers.google.com/apps-script/reference/spreadsheet/