Mirochiu's coding note

在 第六篇 的時候我們製作了瀏覽Drive上檔案的UI，因為我們改成用React範本來建構網站，所以些就來移植之前的成果，透過移植的過程，我們也可以更好的了解React與Apps Script之間的互動方法，之後幾篇都會持續移植之前的成果。

在去年2020年曾 實測 單純使用HTML表單，都不能將檔案資料傳到Apps Script。 而更早之前，網路上也有許多Apps Script方法表示可以提供檔案上傳，不過最近我實測之後其實是有些問題的，例如我只能傳文字檔，傳其他類型就會發生檔案損毀的問題。 所以當我今年2021開始寫Apps Script系列文章時，就以目前仍可用的方法做來分享

在前一篇 Apps Script用Sheet生成動態網頁(5): 上傳檔案 中，我們完成了上傳任意類型的檔案，不過我們不想整個share資料給所有，想從我們的AppsScript網頁呈現，所以就需要製作瀏覽上傳檔案的UI。 要製作一個完備的瀏覽UI需要比較多的前端知識，不過如果是要把檔案的資訊顯示出來，只需要找一套好懂的UI框架就好。這裡會使用Bootstrap 5.0作為範例，本篇不會著墨在UI的用法，若有不懂的部份可以在下面留言提問。我們這就開始吧!

前言 看到上一篇， Apps Script用Sheet生成動態網頁(4):上傳HTML檔案 ，很容易就會聯想到，既然可以上傳HTML檔案，那應該也可以上傳一般檔案吧? 用來上傳像是圖片、影片等等的檔案。 只是很不幸的，除了HTML和文字檔案，其他類型檔案用相同的上傳方法，再下載回來都會變成無法辨識的格式。而在上一年的時候，我也曾實測並彙整在 Apps Script上傳檔案到Google Drive ，關於常見的2種表單上傳檔案的方法，也是以失敗作收。 不過感謝 tanaikech的文章 ，除了表單方法之外，我們還有方法可以突破平台限制。以下就針對這種上傳方法做說明。

緣起 由於之後專案經理想要在我們之前AppScript上開發的網站上，加入上傳圖檔的機制，先進行相關方法的Survey。 參考資料 搜索一陣之後，看到這篇BLOG寫的滿完整的，提供兩種方法的實作程式碼 https://tanaikech.github.io/2017/02/05/file-upload-using-dopost-on-google-web-apps/ 可行的2種 方法 經我的實測，會僅有兩種實作方法，是因為AppScript的doPost方法，是會經過Google伺服器的轉譯，上傳檔案的資料根本無法抵達doPost方法，故僅能有上篇BLOG所寫的兩種方法可用。 使用google app script所提供的方法，缺點是沒辦法關注檔案上傳的進度。 使用變形版本的傳統Form：是將檔案手動轉成BASE64文字格式，再將轉換後資料附加在傳統的Form上送出資料，繞過AppScript的限制。 傳統的Form的方法是"application/x-www-form-urlencoded"，傳統Form會因為Browser端及Server端的限制有不同的檔案大小限制，從1MB到2GB都有。 https://stackoverflow.com/questions/2880722/can-http-post-be-limitless 實測傳統Form上傳: 失敗 (不使用變形版本傳統Form) 只放測試文字和選取上傳檔案的form，在AppScript的doPost部份，無法得到檔案內容，只有檔案名稱。 2020/7/3 下午 5:35:21 Form upload file {"contextPath":"","parameter":{"mytext":"測試文字","file1":"1be54c3adeb44ec7.jpg"},"contentLength":70,"parameters":{"mytext":["測試文字"],"file1":["1be54c3adeb44ec7.jpg...