neno-tech/code.gs

## code.gs
function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('index');
  htmlOutput.message = '';
  return htmlOutput.evaluate();
}

function doPost(e) {
  var folder = DriveApp.getFolderById('xxx');//เปลี่ยนเป็นไอดีโฟลเดอร์เก็บไฟล์ของท่าน;
  var data = Utilities.base64Decode(e.parameter.fileData);
  var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
  var file = folder.createFile(blob);
  var fileURL = file.getUrl();
      recordData(
        e.parameter.username,
        e.parameter.nickname,
        e.parameter.phone,
        fileURL
        );
  var htmlOutput =  HtmlService.createTemplateFromFile('success');
      htmlOutput.message = 'อัปโหลดไฟล์เรียบร้อยแล้ว';
  return htmlOutput.evaluate();
}

function recordData(username, nickname, phone, fileURL){
  var token = 'xxx'
  msg = 'มีนักเรียนส่งงาน ชื่อ '+username
  var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
      ss.appendRow([
        new Date(),
        username,
        nickname,
        "'"+phone,
        fileURL
        ]);
        NotifyApp.sendNotify(token,msg)
}

function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

## index.html
<!DOCTYPE html>
<html>
<head>
    <base target="_top">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&family=Prompt:wght@300&display=swap" rel="stylesheet">
<style>
  body{
    font-family: 'Mitr', sans-serif;
  }
</style>
</head>
<body>
  <div class="container">
    <!-- <div class="card mt-3 mx-auto text-center" style="width: 22rem;">
      <div class="card-header bg-primary text-white">
    ฟอร์มอัปโหลดไฟล์
  </div> -->

</div>
    <div class="card mt-3 mx-auto " style="width: 22rem;">
      <!-- <div class="card-header bg-primary text-white">
    ฟอร์มอัปโหลดไฟล์
  </div> -->
  <img src="https://www.mindphp.com/images/articles/202001/article-meaning/web-banner.png" class="card-img-top" alt="...">
  <div class="card-body">
    <?var url = getUrl();?>
    <form method="post" onsubmit="wait()" action="<?= url ?>">

        <div class="mb-3">
            <label for="username" class="form-label"> ชื่อ สกุล</label>
            <input type="text" class="form-control" name="username" placeholder="ชื่อ สกุล" required>
        </div>

        <div class="mb-3">
            <label for="nickname" class="form-label"> ชื่อเล่น</label>
            <input type="text" class="form-control" name="nickname" placeholder="ชื่อเล่น" required>
        </div>

        <div class="mb-3">
            <label for="phone" class="form-label"> เบอร์โทร</label>
            <input type="text" class="form-control" name="phone" placeholder="เบอร์โทร" required>
        </div>

        <div class="mb-3">
            <label  class="form-label"> อัปโหลดไฟล์</label>
            <input type="file" class="uploader form-control" 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="mb-3">
            <button type="submit" class="btn btn-primary"> อัปโหลด</button>
        </div>
    </form>
  </div>
</div>
  </div>


    <script>
        function LoadFile(event) {
            var file = event.target.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                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);
        }
        function wait(){
          Swal.fire({
  position: 'center',
  icon: 'info',
  title: 'โปรดรอ..กำลังอัปโหลดข้อมูล',
  allowOutsideClick: false,
  showConfirmButton: false,
})
        }
    </script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>

</html>

## success.html
<!DOCTYPE html>
<html>
  <head>
        <base target="_top">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&family=Prompt:wght@300&display=swap" rel="stylesheet">
<style>
  body{
    font-family: 'Mitr', sans-serif;
  }
</style>
  </head>
  <body>
    <?=message?>
    <script>
      onload = function(){
        Swal.fire({
  position: 'center',
  icon: 'success',
  title: 'อัปโหลดไฟล์เรียบร้อยแล้ว',
  showConfirmButton: false,
  timer: 1500
})
      }
    </script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  </body>
</html>
	function doGet(e) {
	var htmlOutput = HtmlService.createTemplateFromFile('index');
	htmlOutput.message = '';
	return htmlOutput.evaluate();
	}

	function doPost(e) {
	var folder = DriveApp.getFolderById('xxx');//เปลี่ยนเป็นไอดีโฟลเดอร์เก็บไฟล์ของท่าน;
	var data = Utilities.base64Decode(e.parameter.fileData);
	var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
	var file = folder.createFile(blob);
	var fileURL = file.getUrl();
	recordData(
	e.parameter.username,
	e.parameter.nickname,
	e.parameter.phone,
	fileURL
	);
	var htmlOutput = HtmlService.createTemplateFromFile('success');
	htmlOutput.message = 'อัปโหลดไฟล์เรียบร้อยแล้ว';
	return htmlOutput.evaluate();
	}

	function recordData(username, nickname, phone, fileURL){
	var token = 'xxx'
	msg = 'มีนักเรียนส่งงาน ชื่อ '+username
	var ss = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet()
	ss.appendRow([
	new Date(),
	username,
	nickname,
	"'"+phone,
	fileURL
	]);
	NotifyApp.sendNotify(token,msg)
	}

	function getUrl() {
	var url = ScriptApp.getService().getUrl();
	return url;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<base target="_top">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Mitr:wght@300&family=Prompt:wght@300&display=swap" rel="stylesheet">
	<style>
	body{
	font-family: 'Mitr', sans-serif;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<!-- <div class="card mt-3 mx-auto text-center" style="width: 22rem;">
	<div class="card-header bg-primary text-white">
	ฟอร์มอัปโหลดไฟล์
	</div> -->

	</div>
	<div class="card mt-3 mx-auto " style="width: 22rem;">
	<!-- <div class="card-header bg-primary text-white">
	ฟอร์มอัปโหลดไฟล์
	</div> -->
	<img src="https://www.mindphp.com/images/articles/202001/article-meaning/web-banner.png" class="card-img-top" alt="...">
	<div class="card-body">
	<?var url = getUrl();?>
	<form method="post" onsubmit="wait()" action="<?= url ?>">

	<div class="mb-3">
	<label for="username" class="form-label"> ชื่อ สกุล</label>
	<input type="text" class="form-control" name="username" placeholder="ชื่อ สกุล" required>
	</div>

	<div class="mb-3">
	<label for="nickname" class="form-label"> ชื่อเล่น</label>
	<input type="text" class="form-control" name="nickname" placeholder="ชื่อเล่น" required>
	</div>

	<div class="mb-3">
	<label for="phone" class="form-label"> เบอร์โทร</label>
	<input type="text" class="form-control" name="phone" placeholder="เบอร์โทร" required>
	</div>

	<div class="mb-3">
	<label class="form-label"> อัปโหลดไฟล์</label>
	<input type="file" class="uploader form-control" 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="mb-3">
	<button type="submit" class="btn btn-primary"> อัปโหลด</button>
	</div>
	</form>
	</div>
	</div>
	</div>


	<script>
	function LoadFile(event) {
	var file = event.target.files[0];
	var reader = new FileReader();
	reader.onload = function (e) {
	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);
	}
	function wait(){
	Swal.fire({
	position: 'center',
	icon: 'info',
	title: 'โปรดรอ..กำลังอัปโหลดข้อมูล',
	allowOutsideClick: false,
	showConfirmButton: false,
	})
	}
	</script>
	<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	</body>

	</html>