neno-tech/code.gs

## code.gs
//เครดิต อ.ดรัณภพ ยิ้มแย้ม ธ.กรุงศรีฯ 000-7-29578-3
//LibraryId : 1CcBYkrGSeBRgphHUE92vWInyULOcJ1Ub6eFUR0_gI1h9I6whLjXtDA-P

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

var url = 'xxx'
var sh = 'xxx'
var folderId = 'xxx'

function processForm(formdata){
  var superscript = SuperScript.initSuper(url,sh)
  var formObject = {}
  formdata.forEach(element => formObject[element.name] = element.value)
  var file = superscript.uploadFile(folderId,formObject.myfile.data,formObject.myfile.name)
  var ss= SpreadsheetApp.openByUrl(url);
  var ws=ss.getSheets()[0]
   ws.appendRow([
    formObject.name,
     file.getUrl()
  ]);
}


## index.html
<!DOCTYPE html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
		integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
		crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
		integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
	<div class="container py-5">
		<div class="row">
			<div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
				<nav class="navbar navbar-dark bg-primary">
					<a class="navbar-brand" href="#" fw-bold mb-3>ฟอร์มอัปโหลดไฟล์ด้วย SuperScript</a>
				</nav>
				<br>
				<form id="myForm" onsubmit="handleFormSubmit()">
					<div id="form_alerts"></div>
					<div class="form-group mb-3">
						<label for="name" class="form-label">ชื่อ สกุล</label>
						<input type="text" id="name" name="name" class="form-control" required>
                    </div>
						<div class="form-group">
							<label for="uploadFile">อัปโหลดไฟล์</label>
							<input type="file" class="form-control" name="uploadfile" id="uploadfile">
                            </div>
							<button type="submit" class="btn btn-primary btn-block">บันทึกข้อมูล</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script>
		function preventFormSubmit() {
                var forms = document.querySelectorAll('form');
                for (var i = 0; i < forms.length; i++) {
                    forms[i].addEventListener('submit', function (event) {
                        event.preventDefault();
                    });
                }
            }
            window.addEventListener('load', preventFormSubmit);
            function handleFormSubmit() {
                var formdata = $('#myForm').serializeArray()
                formdata.push({
                  name: 'myfile',
                  value: myfile
                })
                google.script.run.withSuccessHandler(success).processForm(formdata);
            }
            function success(){
                 document.getElementById("myForm").reset()
                 Swal.fire({
                  position: 'center',
                  icon: 'success',
                  title: 'บันทึกเรียบร้อย',
                  showConfirmButton: false,
                  timer: 1500
                })
            }
		var myfile ={},file, reader = new FileReader();
      reader.onloadend = function(e) {
          myfile.data = e.target.result
          myfile.name = file.name
          console.log(myfile)
      };
     $('#uploadfile').change(function(){
       file = $('#uploadfile')[0].files[0]
        reader.readAsDataURL(file);
     })
	</script>
	<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>
	//เครดิต อ.ดรัณภพ ยิ้มแย้ม ธ.กรุงศรีฯ 000-7-29578-3
	//LibraryId : 1CcBYkrGSeBRgphHUE92vWInyULOcJ1Ub6eFUR0_gI1h9I6whLjXtDA-P

	function doGet() {
	return HtmlService.createTemplateFromFile('index').evaluate()
	.addMetaTag('viewport', 'width=device-width, initial-scale=1')
	.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
	}

	var url = 'xxx'
	var sh = 'xxx'
	var folderId = 'xxx'

	function processForm(formdata){
	var superscript = SuperScript.initSuper(url,sh)
	var formObject = {}
	formdata.forEach(element => formObject[element.name] = element.value)
	var file = superscript.uploadFile(folderId,formObject.myfile.data,formObject.myfile.name)
	var ss= SpreadsheetApp.openByUrl(url);
	var ws=ss.getSheets()[0]
	ws.appendRow([
	formObject.name,
	file.getUrl()
	]);
	}
	<!DOCTYPE html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
	integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
	crossorigin="anonymous" referrerpolicy="no-referrer"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
	integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
	</head>
	<body>
	<div class="container py-5">
	<div class="row">
	<div class="col-lg-5 col-md-8 mx-auto shadow border bg-white p-4 rounded">
	<nav class="navbar navbar-dark bg-primary">
	<a class="navbar-brand" href="#" fw-bold mb-3>ฟอร์มอัปโหลดไฟล์ด้วย SuperScript</a>
	</nav>
	<br>
	<form id="myForm" onsubmit="handleFormSubmit()">
	<div id="form_alerts"></div>
	<div class="form-group mb-3">
	<label for="name" class="form-label">ชื่อ สกุล</label>
	<input type="text" id="name" name="name" class="form-control" required>
	</div>
	<div class="form-group">
	<label for="uploadFile">อัปโหลดไฟล์</label>
	<input type="file" class="form-control" name="uploadfile" id="uploadfile">
	</div>
	<button type="submit" class="btn btn-primary btn-block">บันทึกข้อมูล</button>
	</div>
	</div>
	</form>
	</div>
	</div>
	</div>
	<script>
	function preventFormSubmit() {
	var forms = document.querySelectorAll('form');
	for (var i = 0; i < forms.length; i++) {
	forms[i].addEventListener('submit', function (event) {
	event.preventDefault();
	});
	}
	}
	window.addEventListener('load', preventFormSubmit);
	function handleFormSubmit() {
	var formdata = $('#myForm').serializeArray()
	formdata.push({
	name: 'myfile',
	value: myfile
	})
	google.script.run.withSuccessHandler(success).processForm(formdata);
	}
	function success(){
	document.getElementById("myForm").reset()
	Swal.fire({
	position: 'center',
	icon: 'success',
	title: 'บันทึกเรียบร้อย',
	showConfirmButton: false,
	timer: 1500
	})
	}
	var myfile ={},file, reader = new FileReader();
	reader.onloadend = function(e) {
	myfile.data = e.target.result
	myfile.name = file.name
	console.log(myfile)
	};
	$('#uploadfile').change(function(){
	file = $('#uploadfile')[0].files[0]
	reader.readAsDataURL(file);
	})
	</script>
	<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	</body>
	</html>