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

最新消息

[公告2014/05/30] 如有需要將部落格中,任何一篇文章的程式碼使用在商業用途,請與我聯繫。

[公告2015/04/26] Line版的 iInfo程式與投資應用 群組已上線想加入的朋友們,請先查看 "入群須知" 再與我聯繫 Line : aminwhite5168,加入請告知身分與回答 "入群須知" 的問題。

[公告2017/02/20] 近來有網友詢問 MultiCharts 與 Excel 畫冰火能量圖 (8)MultiCharts 與Excel 畫冰火能量圖(11) --- 更名「台股儀表板」 文章中教學檔案取得方式,有興趣的朋友可透過 Line了解詳情 (請勿以為是免費分享),Line : aminwhite5168。

[公告2018/04/22] 台北 Python + Excel VBA 金融資訊爬蟲課程,於 7/21、7/22 兩天開課,課程如網頁內容 金融資訊爬蟲班:台北班 Python 金融資訊爬蟲、EXCEL VBA 金融資訊爬蟲,5/30 前早鳥優惠票,請盡快把握機會,歡迎券商、大專院校邀約講座。

[公告2018/06/01] 台指能量儀表板教學課程 7/14 (六) 下午 1:30 ~ 4:30,15人開班,課程如網頁內容 台北班:台指能量儀表板

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>
部署為網路應用程式。

核對權限。

選擇帳號。

點選進階。

前往驗證。

程式執行權限「允許」。

完成部署應用程式。

準備上傳檔案的內容。

輸入上傳者的資料。

等待檔案上傳。

完成上傳。

到雲端硬碟中找到檔案上傳列表查詢。

在檔案上傳資料夾中預覽剛剛上傳的檔案內容。

到此完成上傳Google雲端空間的製作。

參考資料: