upload multi file
單檔 (上傳速度優良)
Code.gs
var folderID = "更換成你的雲端硬碟資料夾ID"; //Allen added
function doGet(){
return HtmlService.createHtmlOutputFromFile("Index.html");
}
function saveFile(obj) {
var blob = Utilities.newBlob(Utilities.base64Decode(obj.data), obj.mimeType, obj.fileName);
var folder = DriveApp.getFolderById(folderID); //Allen added
return folder.createFile(blob).getId(); //Allen added
//return DriveApp.createFile(blob).getId();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input name="file[]" id="files" type="file" multiple>
<input type='button' value='Upload' onclick='getFiles()'>
<br>
<p id="resultMessage"></p>
<script>
function getFiles() {
const f = document.getElementById('files');
[...f.files].forEach((file, i) => {
const fr = new FileReader();
fr.onload = (e) => {
const data = e.target.result.split(",");
const obj = {fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
google.script.run.withSuccessHandler((id) => {
document.getElementById("resultMessage").value = "上傳檔案：" + id;
}).saveFile(obj);
}
fr.readAsDataURL(file);
});
}
</script>
</body>
</html>
多檔壓縮成zip (以下尚未測試)
Code.gs
function createZip(obj) {
var blobs = obj.map(function(e) {
return Utilities.newBlob(Utilities.base64Decode(e.data), e.mimeType, e.fileName);
});
var zip = Utilities.zip(blobs, "filename.zip");
return DriveApp.createFile(zip).getId();
}
Index.html
<input name="file" id="files" type="file" multiple>
<input type='button' value='Upload' onclick='getFiles()'>
<script>
function getFiles() {
const f = document.getElementById('files');
const r = Promise.all([...f.files].map((file, i) => {
const fr = new FileReader();
return new Promise((r) => {
fr.onload = (e) => {
const data = e.target.result.split(",");
return r({fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});
}
fr.readAsDataURL(file);
});
}))
.then((obj) => {
google.script.run.withSuccessHandler((id) => {
console.log(id);
}).createZip(obj);
});
}
</script>
參考文獻
https://gist.github.com/tanaikech/88fcae255abb4aac5bec81ad5ca213ef (尚未測試)
chatGPT說明
這段程式碼是一個簡單的JavaScript函數，用於從使用者的本地端上傳檔案到Google Drive。讓我們來解釋這段程式碼的功能：
function getFiles() { ... }: 這是一個名為getFiles的函數，它會在使用者選擇並上傳檔案後被觸發。
const f = document.getElementById('files');: 這行程式碼從HTML文檔中獲取id為"files"的元素，通常是一個<input type="file">元素，該元素允許使用者選擇檔案進行上傳。
[...f.files].forEach((file, i) => { ... }): 這行程式碼使用ES6展開運算子...將f.files轉換為一個陣列，然後使用forEach迴圈遍歷使用者選擇的每個檔案。file代表每個檔案物件，i代表檔案的索引。
const fr = new FileReader();: 這行程式碼建立了一個新的FileReader物件，它允許JavaScript讀取檔案內容。
fr.onload = (e) => { ... }: 這行程式碼設置了當FileReader完成讀取檔案後的回呼函數。當檔案成功讀取時，這個回呼函數會被執行。
const data = e.target.result.split(",");: 這行程式碼將讀取的檔案資料轉換為字串，並使用split函數將其拆分為兩部分，以逗號分隔。通常，這個字串的第一部分是檔案的資訊，例如MIME類型，而第二部分是檔案的實際內容，以Base64編碼表示。
const obj = {fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};: 這行程式碼建立一個obj物件，包含了檔案的名稱(fileName)、MIME類型(mimeType)和檔案內容(data)。
google.script.run.withSuccessHandler((id) => { ... }).saveFile(obj);: 這行程式碼呼叫Google Apps Script中的saveFile函數，並傳遞obj物件作為參數。google.script.run允許JavaScript與Google Apps Script進行通信。withSuccessHandler函數用於指定成功回呼函數，當saveFile函數成功執行後，該回呼函數會被執行，並且傳遞回傳的id值。
fr.readAsDataURL(file);: 這行程式碼使用FileReader來讀取選擇的檔案。readAsDataURL方法讀取檔案的內容並返回Base64編碼的字串。
總結來說，這段程式碼讓使用者選擇檔案，然後使用FileReader將檔案讀取為Base64字串，再將檔案資訊和Base64字串包裝為一個物件，最後通過google.script.run調用saveFile函數將檔案上傳到Google Drive。