code.gs code


function doGet(e) {
  var html = HtmlService.createTemplateFromFile("index");
  html.message='';
  var check = html.evaluate();
  // 避免無法顯示，使用XFrame allow all
  var display = check.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  return display;
}




// 建立上傳的檔案，並上傳到特定夾
function doPost(e) {
  
  // Logger.log(JSON.stringify(e));
  
  var destination_id = '1uWPXP6z8KKgnF_5nZwU_PvgurHPRXTPW';  // ID OF GOOGLE DRIVE DIRECTORY;
  var destination = DriveApp.getFolderById(destination_id);
  
   //  建立檔案
  var data = Utilities.base64Decode(e.parameter.fileData);
  var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);

//  上傳到特定夾
  // destination.createFile(blob);
  

// 執行新增檔案，並上傳到資料夾，抓file ID
var fileID = destination.createFile(blob).getId();

var fileURL="https://drive.google.com/file/d/"+fileID+"/view"

// 上傳資料
  listRecord(e.parameter.description, e.parameter.fileName, fileURL); 
  

  // 回應訊息
  var htmlOutput =  HtmlService.createTemplateFromFile('upload2');
  
  htmlOutput.message = '上傳成功!';
  return htmlOutput.evaluate();
  
}



// HTML與Apps Script 資料上傳的路徑
function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

// 上傳資料的紀錄
function listRecord( description, filename,  fileURL)
{
  var url = 'https://docs.google.com/spreadsheets/d/1ZDRCHmhR7vvmfK_-YiReEpBc4SlG6sUGB2UnjSLftpc/edit#gid=0';  //URL OF GOOGLE SHEET;
  var ss= SpreadsheetApp.openByUrl(url);
  var recordsSheet = ss.getSheetByName("Sheet1");

  recordsSheet.appendRow([ new Date(), filename, description, fileURL]);
}

index.html

<!DOCTYPE html>
<html>

<head>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>

    <style>
        .container {
            width: 80%;
            margin-top: 100px;
            padding: 30px;
            background-color: rgb(110, 151, 255);
            border-radius: 20px;
        }
        
        .btn {
            width: 100%;
        }
        
        h1 {
            text-align: center;
            color: white;
        }
        
        label {
            color: white;
            font-size: 20px;
        }
        
        .message {
            width: 100%;
            padding: 0px;
            background-color: rgb(171, 171, 171);
            margin-top: 10px;
            color: rgb(255, 255, 255);
            font-size: 30px;
        }
    </style>

    <base target="_top">
    <script>
        // 建立上傳的系統
        function LoadFile(event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = function(e) {
                // console.log(e.target.result);
                var fileData = e.target.result.substr(e.target.result.indexOf(",") + 1);
                var mimeTypeStart = e.target.result.indexOf("data:") + 5;
                var mimeTypeEnd = e.target.result.indexOf(";");
                var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
                var fileName = file.name;
                document.getElementById("fileData").value = fileData;
                document.getElementById("mimeType").value = mimeType;
                document.getElementById("fileName").value = fileName;
            };
            reader.readAsDataURL(file);
        }
    </script>
</head>

<body>


    <div class="container">
        <h1>檔案上傳系統</h1>
        <?var url = getUrl();?>
            <form method="post" action="<?= url ?>">
                <div class="mb-3">
                    <label for="" class="form-label">選擇檔案file:</label>
                    <br>
                    <input type="file" name="file" onchange="LoadFile(event)" />
                    <input type="hidden" id="fileData" name="fileData" />
                    <input type="hidden" id="mimeType" name="mimeType" />
                    <input type="hidden" id="fileName" name="fileName" />
                </div>
                <div class="col-sm-12">
                    <div class="row">
                        <div class="mb-3">
                            <label for="" class="form-label">描述:</label>
                            <br>
                            <textarea class="form-control" name="description" placeholder="描述" rows="5"></textarea>
                        </div>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary">上傳</button>
            </form>

            <br>

            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <span>上傳結果：<?= message ?></span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>

    </div>

</body>

</html>

發表迴響