Apps Script上傳檔案到Google Drive

-
緣起

由於之後專案經理想要在我們之前AppScript上開發的網站上，加入上傳圖檔的機制，先進行相關方法的Survey。

參考資料

搜索一陣之後，看到這篇BLOG寫的滿完整的，提供兩種方法的實作程式碼

可行的2種方法

經我的實測，會僅有兩種實作方法，是因為AppScript的doPost方法，是會經過Google伺服器的轉譯，上傳檔案的資料根本無法抵達doPost方法，故僅能有上篇BLOG所寫的兩種方法可用。
  1. 使用google app script所提供的方法，缺點是沒辦法關注檔案上傳的進度。
  2. 使用變形版本的傳統Form：是將檔案手動轉成BASE64文字格式，再將轉換後資料附加在傳統的Form上送出資料，繞過AppScript的限制。
傳統的Form的方法是"application/x-www-form-urlencoded"，傳統Form會因為Browser端及Server端的限制有不同的檔案大小限制，從1MB到2GB都有。


實測傳統Form上傳:失敗
(不使用變形版本傳統Form)

只放測試文字和選取上傳檔案的form，在AppScript的doPost部份，無法得到檔案內容，只有檔案名稱。
2020/7/3 下午 5:35:21Form upload file
{"contextPath":"","parameter":{"mytext":"測試文字","file1":"1be54c3adeb44ec7.jpg"},"contentLength":70,"parameters":{"mytext":["測試文字"],"file1":["1be54c3adeb44ec7.jpg"]},"postData":{"contents":"mytext=%E6%B8%AC%E8%A9%A6%E6%96%87%E5%AD%97&file1=1be54c3adeb44ec7.jpg","length":70,"name":"postData","type":"application/x-www-form-urlencoded"},"queryString":""}


實測現代方法:失敗

至於現代網頁的上傳檔案的新方法還有“multipart/form-data”，在JQuery中可以用FormData實作，但是無法AppScript上無法使用，"multipart/form-data"的方式傳輸到AppScript只會在Browser上得到錯誤回應。
from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

整理測試方法如下:
1. 在Form標籤設定method="post" enctype="multipart/form-data"

2. JQuery初始化加入
$(document).ready(()=>{$("Form").submit(onHandelUpload);});
3. 加入onHandelUpload函數 
function onHandelUpload(e){
  e.preventDefault();
  var data = new FormData($(this)[0]);
  $.ajax({
    type: 'POST',
    url: '{你的AppScript正式版URL，不能是Latest版本}',
    data: data,
    cache: false,
    processData: false,
    contentType: false,
    dataType: 'text',
    success: function(results) {
      console.log(JSON.stringify(results));
    },
    error: function(results) {
      console.log(JSON.stringify(results));
    },
  });
}


留言

張貼留言