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

情史黃

8 min readJul 29, 2016

因為某個人問我你知道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>