【Google尋寶】02.自製上傳檔案到Google 雲端的程式

前言

由於需要學員統一上傳照片至【Google雲端硬碟】，而且不是每個學員都有 Google 帳號以及還要教授如何上傳有點麻煩..

因此搜尋可以自己製作上傳至【Google 雲端硬碟】的網頁程式

希望達到如下目的

1.單純一個網址提供一次上傳多個檔案功能

2.提供一個下拉選單供學員選擇自己座號，上傳檔名會依照座號做編碼

接下來就是一陣 Google 搜尋後找到一個解決方案...就是採用 Google Apps Script

Google Apps Script

Google Apps Script 是 Google 推出的一個應用解決方案，讓你可以透過程式存取 Google 的一些應用，

如 GMail、Google 日曆、Google文件、Google雲端硬碟 ...等等。

這次用到的是上傳Google雲端硬碟方面的範例

1.安裝Google Apps Script

首先登入至網頁版Google雲端硬碟介面，點選【新增】 >【更多】>【連接更多應用程式】

接著搜尋【google apps】

即可找到【Google Apps Script】並點選【+連接】進行連接安裝置Google 雲端硬碟新增選項內

2.撰寫Google Apps Script

進行完以上步驟後，新增選項內會多一個【Google Apps Script】選項

點選該選項後，會跳至 Google Apps Script (之後簡稱 GS) 編輯畫面，

說明選項內有不少文件，要知道更詳細可以自行查閱

首先將我們需要的功能給拆解

a.需要一個 html 頁面表單提供給學員上傳檔案用

b.需要撰寫上傳檔案的 GS 程式碼

form.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-zh_TW.min.js"></script> 
  <script language="javascript">
  
  //資料夾及 TITLE
  var mapDATE = {"0812":"0", "0814":"1", "0813":"2"};  // 日期　=> index
  var arrTITLE = ["<font style='color:blue'>8/12(六)</font>","<font style='color:red'>8/13(日)</font>", "8/14(一)"];
  var arrREVIEW = ["0B4FHrOa0JsA3TWM4Ulh2N01rVnc", "0B4FHrOa0JsA3c0t2enBwTkFDdUE", "0B4FHrOa0JsA3WnRaNm0zVkpHU28"];
  var arrFOLDER = ["Day1x", "Day2x", "Day3x"];
  
  // 回傳本日 mmdd
  function today() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd<10) {
      dd = '0'+dd
    } 
    if(mm<10) {
      mm = '0'+mm
    } 
    today = mm + dd;
    return today;
  }
  
function up_page() {
    alert(location.href);
    return true;
}

$(function() {
  var td = today();
  if (typeof mapDATE[td] == 'undefined') 
    td = "0812";
  var idx = mapDATE[td];
  var up_folder = arrFOLDER[idx];
  var title = arrTITLE[idx];
  var review_url = arrREVIEW[idx];
  $("#title").html(title);
  $("#folder").text(td + " - " + up_folder);
  $("[name=up_folder]").val(up_folder);
  $("[name=review_url]").val(review_url);

  // We can attach the `fileselect` event to all file inputs on the page
  $(document).on('change', ':file', function() {
    var input = $(this),
        numFiles = input.get(0).files ? input.get(0).files.length : 1,
        label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, label]);
  });

  // We can watch for our custom `fileselect` event like this
  $(document).ready( function() {
      $(':file').on('fileselect', function(event, numFiles, label) {

          var input = $(this).parents('.input-group').find(':text'),
              log = numFiles > 1 ? numFiles + ' files selected' : label;

          if( input.length ) {
              input.val(log);
          } else {
              if( log ) alert(log);
          }

      });
  });
  
});

  </script>

</head>
<body>
<span id="folder">zzz..</span>
<center>
<h1>照片上傳系統 - <span id="title"></span></h1>
<hr>
<form class="form-horizontal" role="form" id="myForm">
    <input type="hidden" name="up_folder" value="" />
    <input type="hidden" name="review_url" value="" />
    <input type="hidden" name="up_url" value="" />
    <div class="form-group">
      <label class="input-lg">選擇學員：</label>
      <select class="selectpicker" data-live-search="true" name="myName">
      <option value="">請選擇</option>
      <option value="11">11(蕭OO)</option>
      <option value="12">12(陳OO)</option>
      <option value="13">13(林OO)</option>
      <option value="14">14(胡OO)</option>
      <option value="15">15(王OO)</option>
      <option value="21">21(鄭OO)</option>
      <option value="22">22(張OO)</option>
      <option value="23">23(盧OO)</option>
      <option value="24">24(蔡OO)</option>
      <option value="25">25(杜OO)</option>
      <option value="31">31(陳OO)</option>
      <option value="32">32(黃OO)</option>
      <option value="33">33(劉OO)</option>
      <option value="34">34(蘇OO)</option>
      <option value="35">35(李OO)</option>
      <option value="41">41(盧OO)</option>
      <option value="42">42(謝OO)</option>
      <option value="43">43(張OO)</option>
      <option value="44">44(陳OO)</option>
      <option value="45">45(趙OO)</option>
      </select>
      <!-- input class="input-lg" style="width:200px;" type="text" name="myName" / --> 
    </div>
    <!-- 上傳按鈕 -->
    <? for (var i = 1; i <=5; i++) { ?>
    <div class="form-group" style="margin-left:10%;margin-right:10%;width:60%;">
      <label class="btn btn-default btn-file">
        <div class="col-lg-6 col-sm-6 col-12">
            <div class="input-group">
                <label class="input-group-btn">
                    <span class="btn btn-primary btn-lg">
                        瀏覽&hellip; <input name="myFile<?=i?>" type="file" style="display: none;" multiple>
                    </span>
                </label>
                <input type="text" class="form-control input-lg" style="width:500px;" readonly>
            </div>
        </div>
      </label>
    </div>
    <?}?>
    <div class="form-group" style="margin-left:10%;width:60%;">
              <input type="submit" class="btn btn-lg btn-primary" value="全部上傳" 
           onclick="return UP(this);">
     </div>
</form>
</center>
<div id="output"></div>

<script>
    function UP(elm){
        if( $("[name=myName]").val() == "" ) {
           alert("請先設定一位學員!");
           return false;
        }
        $(elm).val('檔案上傳中...');
        google.script.run.withSuccessHandler(fileUploaded)
              .uploadFiles($('#myForm').get(0));
        return false;
    }
    
    function fileUploaded(status) {
        document.getElementById('myForm').style.display = 'none';
        document.getElementById('output').innerHTML = status;
    }
</script>
</body>
</html>

server.gs

function doGet(e) {
    return HtmlService
      .createTemplateFromFile('form')
      .evaluate();
}


function uploadFiles(form) {
  try {
    //---up_folder 為上傳資料夾----
    var up_folder = form.up_folder;
    
    //var up_folder = "Day1";
    //----------------------------------------------
    var folder, folders = DriveApp.getFoldersByName(up_folder), i=0;
    
    
    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(up_folder);
    }
   
    
       
    var blob1 = form.myFile1;    
    if(typeof blob1 != 'undefined' && blob1.length >0)
    {
      var file1 = folder.createFile(blob1);    
      file1.setName(form.myName + "-1");
      file1.setDescription("上傳者： " + form.myName);
      i++;
    }

    var blob2 = form.myFile2;    
    if(typeof blob2 != 'undefined' && blob2.length >0)
    {
      var file2 = folder.createFile(blob2);    
      file2.setName(form.myName + "-2");      
      file2.setDescription("上傳者： " + form.myName);
      i++;
    }
    
    var blob3 = form.myFile3; 
    if(typeof blob3 != 'undefined' && blob3.length > 0)
    {
      var file3 = folder.createFile(blob3);    
      file3.setName(form.myName + "-3");
      file3.setDescription("上傳者： " + form.myName);
      i++;
    }
    
    var blob4 = form.myFile4;    
    if(typeof blob4 != 'undefined' && blob4.length > 0)
    {
      var file4 = folder.createFile(blob4);
      file4.setName(form.myName + "-4");
      file4.setDescription("上傳者： " + form.myName);
      i++;
    }

    var blob5 = form.myFile5;    
     if(typeof blob5 != 'undefined' && blob5.length >0)
    {
      var file5 = folder.createFile(blob5);
      file5.setName(form.myName + "-5");
      file5.setDescription("上傳者： " + form.myName);
      i++;
    }
    
    
    var ret = "檔案上傳成功！ 一共上傳了 "  + i + " 個檔案";
    var review_url = form.review_url;
    ret += "<br/><a href='https://drive.google.com/open?id="+ review_url　+"' target='_parent'>查看上傳結果</a>";
    ret += "<br/><a href='https://goo.gl/Xy3L1W' target='_parent'>返回上傳頁面</a>";

    return ret;
    
  } catch (error) {
    return error.toString();
  }
}

發佈程式

點選【發佈】>【部屬為應用程式..】

【專案版本】選【新增】並將權限依照你的需求開放

然後複製上方目前網路應用程式網址的連結即可進入該頁面；也可以產生成【縮網址】或【QRCode】供其他人使用。

執行結果

程式說明

form.html

4-12 行引用了 jquery 及 boostrap3.3.6
14-17 為本程式抽離的設定檔，傳至 gs 檔內使用
mapDATE 為日期對應 index 的JSON(index 0 base)
arrTITLE 為 index 對應到 TITLE 的 JSON
arrREVIEW 為 Google 雲端硬碟頁面的網址列
arrFOLDER 為實際擺放的資料夾名稱(請先建立好)

說明:arrREVIEW 請擺放該目錄公用設定處的這串字串

設定部分預計之後調整成

  var mapCONFIG = {
                "0812":
                    {title:"<font style='color:blue'>8/12(六)</font>",
                     review:"0B4FHrOa0JsA3TWM4Ulh2N01rVnc",
                     folder:"Day1x"},
                "0814":
                    {title:"<font style='color:red'>8/13(日)</font>",
                     review:"0B4FHrOa0JsA3c0t2enBwTkFDdUE",
                     folder:"Day2x"}, 
                "0813":
                    {title:"<font style='color:blue'>8/14(一)</font>",
                     review:"0B4FHrOa0JsA3WnRaNm0zVkpHU28",
                     folder:"Day3x"}
                };

選擇學員的部分套用了 selectpicker 提供下拉選單搜尋功能
144-159 UP (elm) 函數透過 google.script.run.withSuccessHandler
呼叫 server.gs 裡面的 uploadFiles(form)，進行實際的上傳檔案觸理

server.gs

執行本應用的時候，doGet 會被呼叫，內容則是直接抓取 form.html 出來顯示
uploadFiles(form)用來提供 form.html 執行上傳動作時 server 端的動作
函數內容主要處理要擺放的目錄、更改上傳檔案名稱最後秀出上傳結果以及可供查看上傳結果的網址及返回上傳頁面。

我的筆記

阿賓的生活筆記

【Google尋寶】02.自製上傳檔案到Google 雲端的程式

個人頭像

文章分類

熱門文章

近期文章

參觀人氣

部落格文章搜尋