iInfo 資訊交流: Google Apps Script 入門到進階(17) --- 利用「Google 雲端進行檔案上傳」

2018年4月2日星期一

Google Apps Script 入門到進階(17) --- 利用「Google 雲端進行檔案上傳」

前面介紹 Google Apps Script 入門到進階(16) --- 雲端檔案與資料夾建立與操作，接下實作一個應用例子，利用「Google 雲端進行檔案上傳」，這雖然不是什麼新的技術，對於需要使用檔案上傳的場合就很需要，如老師要求學生繳交資料、報名檔案上傳等都.........很實用。
以下介紹如何 Google 雲端硬碟空間作檔案上傳。
在 Google 雲端硬碟上新增 Google script。

以下程式碼輸入至 code.gs 。

function doGet(e) {
  return HtmlService.createTemplateFromFile('form').evaluate()
         .setTitle('上傳系統');
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function uploadFiles(form) {
  
  try {
    
    //---請將「檔案上傳」修改為要存放的資料夾名稱----
    var sheetName = "檔案上傳列表";
    var foldername = "檔案上傳"; 
    //----------------------------------------------
    var folder, folders;
    
    //尋找指定資料夾，資料夾不存在則建立指定名稱資料夾
    folders = DriveApp.getFoldersByName(foldername);
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(foldername);
    }
    
    //處理檔案與設定檔案屬性
    var blob = form.uploadFile;    
    var file = folder.createFile(blob);    
    file.setDescription("上傳者： " + form.id + " - " + form.phone + " - " + form.email);
    
    //取得檔案連結與名稱
    var fileUrl = file.getUrl();
    var fileName = file.getName();
    
    //尋找雲端硬碟是否有這個檔案
    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);
      
      //設定第一行項目名稱
      sheetApp.getSheets()[0].getRange(1, 1, 1, 6).setValues([["上傳時間","姓名","電話","Email","檔案名稱","檔案網址"]]);
    }

    // 讀取第一個sheets找到最後一行
    var sheet = sheetApp.getSheets()[0];    
    var lastRow = sheet.getLastRow();
    
    // 寫入新的資料
    var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[new Date().toLocaleString(),form.id,form.phone,form.email,fileName,fileUrl]]);
    
    return "檔案上傳成功！"
    
  } catch (error) {
    
    return "檔案上傳失敗！ 原因："+error.toString();
  }  
}

以下程式碼輸入至 form.html。

<?!= include('script.js'); ?>
<?!= include('style.css'); ?>
<div id="layout">

      <h1> Google 檔案上傳系統 </h1>
      
      <form id="upload">
          請輸入你的姓名：<input type="text" name="id" placeholder="姓名" tabindex="1" required autofocus>    
          請輸入你的手機電話：<input type="text" name="phone" placeholder="電話" tabindex="2" required>
          請輸入你的Email：<input type="text" name="email" placeholder="電子郵件" tabindex="3" required>
          <input type="file" name="uploadFile">
          <input type="submit" value="上傳作業" 
                 onclick="this.value='上傳中...';
                          google.script.run.withSuccessHandler(fileUploaded)
                          .uploadFiles(this.parentNode);
                          return false;">
      </form>
      <div id="output"></div>

</div>

以下程式碼輸入至 style.css.html。

<style>
#layout{
  margin: 0px auto;
  text-align: center;
  border: 2px solid #FF0000;
  width: 520px;
  height: 420px;
}

input{ 
 display:block; 
 margin: 20px auto;
 font-size:16px;
 width:400px;
}
</style>

以下程式碼輸入至 script.js.html。

<script>
    function fileUploaded(status) {
        document.getElementById('upload').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>

部署為網路應用程式。