Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active December 22, 2023 11:43
Show Gist options
  • Save neno-tech/41fa2b40f533e54df31267d3d7369ab7 to your computer and use it in GitHub Desktop.
Save neno-tech/41fa2b40f533e54df31267d3d7369ab7 to your computer and use it in GitHub Desktop.
Download ZIP
ระบบสมัคร+ลงทะเบียน+อัพรูป Marerialize สวยๆ 2021
Raw
code.gs
var SHEET_NAME = "xxx";//ชื่อชีต
var SpreadsheetID = 'xxx'
var SCRIPT_PROP = PropertiesService.getScriptProperties();
function doGet(e) {
var template = HtmlService.createTemplateFromFile('forms')
return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME)
.addMetaTag('viewport', 'width=device-width , initial-scale=1')
}
function setup() {
var doc = SpreadsheetApp.getActiveSpreadsheet();
SCRIPT_PROP.setProperty(SpreadsheetID, doc.getId())
}
function uploadFile(data, file, name, school, email, tel) {
try {
var folder = DriveApp.getFolderById('xxx');//ไอดีโฟลเดอร์
var date = Utilities.formatDate(new Date(),'GMT+7','dd/MM/yyyy')
var contentType = data.substring(5, data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,') + 7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name,date].join(" ")).createFile(blob),
filelink = file.getUrl();
var lock = LockService.getPublicLock();
lock.waitLock(30000);
var doc = SpreadsheetApp.openById(SpreadsheetID);
var sheet = doc.getSheetByName(SHEET_NAME);
var headRow = 1;
var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
var nextRow = sheet.getLastRow() + 1;
var row = [];
for (i in headers) {
if (headers[i] == "วันที่") {
row.push(new Date());
} else if (headers[i] == "ชื่อ สกุล") {
row.push(name);
} else if (headers[i] == "โรงเรียน") {
row.push(school);
} else if (headers[i] == "อีเมล") {
row.push(email);
} else if (headers[i] == "เบอร์โทร") {
row.push('0'+tel.toString())
} else if (headers[i] == "ลิ้งค์ไฟล์") {
row.push(filelink);
}
}
sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
return "success";
} catch (f) {
return f.toString();
} finally {
lock.releaseLock();
}
}
Raw
forms.html
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ฟอร์มลงทะเบียน</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<style>
.prompt {
font-family: 'Prompt', sans-serif;
}
body {
font-family: 'Prompt' !important;
}
.form-error{color: #D8000C;
.disclaimer {
width: 480px;
color: #646464;
margin: 20px auto;
padding: 0 16px;
text-align: center;
font: 400 12px Roboto, Helvetica, Arial, sans-serif
}
.content {
max-width: 500px;
margin: auto;
}
.disclaimer a {
color: #009688
}
#credit {
display: none
}
</style>
</head>
<body>
<div class = "container">
<div class="content">
<div class="col s12 m5">
<div class="card-panel ">
<nav class = teal>
<div class="nav-wrapper" style="max-width: 480px;margin: 40px auto;">
<a href="#" class="brand-logo center">ฟอร์มอภิวัฒน์สอนสร้างสื่อ</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
</ul>
</div>
</nav>
<form class="main" id="myForm">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">ฟอร์มลงทะเบียนอบรม</h5>
<p class="disclaimer">กรอกข้อมูลให้ครบสมบูรณ์ทุกช่อง.</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input id="name" type="text" name="Name" class="validate" required>
<label for="name">ชื่อ สกุล</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">school</i>
<input id="school" type="text" name="school" class="validate" required >
<label for="school">โรงเรียน</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input id="email" type="email" name="Email" class="validate" required >
<label for="email">อีเมล</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">phone</i>
<input id="tel" type="tel" name="Tel" class="validate" required >
<label for="tel">เบอร์โทร</label>
</div>
</div>
<div class="row">
<div class="file-field input-field col s12">
<div class="btn">
<span>อัพโหลดไฟล์</span>
<input id="files" type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="เลือกไฟล์ที่จะทำการอัปโหลด">
</div>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<button class="btn waves-effect waves-light" type="submit">บันทึกข้อมูล
<i class="material-icons right">send</i></button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id="progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">แจ้งผลการลงทะเบียนอบรม</h5>
<p>ท่านลงทะเบียนเสร็จเรียบร้อยแล้ว..</p>
<p class="center-align"><a class="btn btn-large" onclick="restartForm()">กลับหน้าหลัก</a></p>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script>
//Initialization materialize
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems, options);
});
//Initialization materialize
var file, reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("File " + file.name + " could not be read.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFile(e.target.result, file.name,
$('input#name').val(),
$('input#school').val(),
$('input#email').val(),
$('input#tel').val());
}
};
function showSuccess(e) {
if (e === "success") {
$('#forminner').hide();
$('#success').show();
//--แสดง sweet alert
Swal.fire({
position: 'center',
icon: 'success',
title: 'บันทึกข้อมูลของท่านเรียบร้อยแล้ว',
showConfirmButton: false,
timer: 2000
})
//--แสดง sweet alert -->
} else {
showError(e);
}
}
function restartForm() {
$('#myForm').trigger("reset");
$('#forminner').show();
$('#success').hide();
$('#progress').html("");
}
document.getElementById("myForm").addEventListener("submit",submitForm)
function submitForm() {
event.preventDefault()
var files = $('#files')[0].files;
if (files.length === 0) {
showError("เลือกไฟล์ที่จะอัปโหลด");
return;
}
file = files[0];
if (file.size > 1024 * 1024 * 5) {
showError("The file size should be < 5 MB. ");
return;
}
showMessage("กำลังอัปโหลดข้อมูล..");
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
$(document).ready(function() {
$('select').material_select();
});
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment