Skip to content

Instantly share code, notes, and snippets.

@neno-tech

neno-tech/code.gs

Last active March 5, 2023 11:00
Show Gist options
  • Save neno-tech/0d9206d52e15dec4a0453d876190186b to your computer and use it in GitHub Desktop.
Save neno-tech/0d9206d52e15dec4a0453d876190186b to your computer and use it in GitHub Desktop.
Download ZIP
โค้ดอัปเดตเว็บแอปของขวัญปีใหม่ 65 อัปโหลดหลายไฟล์แบบโค้ดสั้น
Raw
code.gs
// ฟอร์มเว็บแอปแบบครบทุก input
function doGet() {
return HtmlService.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}
function saveData(obj) {
var bdate = obj.data4.split("-")
var thaiDate = LanguageApp.translate(Utilities.formatDate(new Date(bdate[0], parseInt(bdate[1]) - 1, parseInt(bdate[2])), 'GMT+7', 'dd-MMMM-yyyy'), 'en', 'th').split('-').map((a, i) => { if (i != 2 || parseInt(a) > 2100) { return a }; a = parseInt(a) + 543; return a }).join(' ')
var folder = DriveApp.getFolderById("xxx"); //แก้เป็นไอดีโฟลเดอร์ของเรา
var file, file2 = ''
var rowData = [
new Date(),
obj.data1,
obj.data2,
obj.data3,
thaiDate,
obj.data5,
"'" + obj.data6,
obj.data7,
obj.data8,
obj.data9,
obj.data10,
];
if (obj.imagedata) {
Object.keys(obj.imagedata).forEach(key => {
Logger.log(key)
let image = obj.imagedata[key]
let datafile = Utilities.base64Decode(image.data)
let blob = Utilities.newBlob(datafile, image.type, image.name);
file = folder.createFile(blob).getUrl()
rowData.push(file)
})
}
SpreadsheetApp.getActive().getSheets()[0].appendRow(rowData);
return true
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght@400&display=swap" rel="stylesheet">
<style>body{font-family: 'Prompt';}
.form-control:focus {
border-color: #6265e4 !important;
box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}
</style>
</head>
<body>
<div class="card">
<div class="card-header h4 bg-danger text-white">
<i class="fas fa-sign-in-alt"></i> ..ขอให้ทุกคนโชคดี มีความสุข สุขภาพพลานามัยแข็งแรงทั่วหน้ากันทุกๆ คนนะครับ
</div>
<div class="card-body">
<h5 class="card-title text-center"><i class="fas fa-thumbs-up"></i> ..ฟอร์มนี้มีประโยชน์มากๆ นะครับ เป็นการรวม input ทุกแบบ สามารถนำไปประยุกต์ต่อยอดได้อีกมากมาย</h5>
<div class="container">
<div class="jumbotron bg-white d-flex align-items-center min-vh-100 justify-content-center">
<!-- <div class="row"> -->
<div class="col-md-6">
<!-- -------------------------------เริ่มฟอร์ม------------------------------------------ -->
<form id="myForm" onsubmit="submitForm()">
<p class="h3 mb-4 text-center"><i class="fas fa-chalkboard-teacher"></i> ฟอร์มบันทึกข้อมูล</p>
<!-- -------------------------------ชื่อ + สกุล------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<label for="first_name"><i class="fas fa-user"></i> ชื่อ</label>
<input type="text" class="form-control" id="data1" placeholder="ชื่อ" required >
</div>
<div class="form-group col-md-6">
<label for="last_name"><i class="fas fa-user-plus"></i> สกุล</label>
<input type="text" class="form-control" id="data2" placeholder="นามสกุล" required>
</div>
</div>
<!-- -------------------------------เพศ + วันเกิด------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<p><i class="fas fa-restroom"></i> เพศ</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="data3" id="id1" value="ชาย" required>
<label class="form-check-label" for="male">ชาย</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="data3" id="id2" value="หญิง" required>
<label class="form-check-label" for="female">หญิง</label>
</div>
</div>
<div class="form-group col-md-6">
<label for="dateOfBirth"><i class="fas fa-birthday-cake"></i> วันเกิด</label>
<input type="date" class="form-control" id="data4" required>
</div>
</div>
<!-- -------------------------------อีเมล + เบอร์โทร------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<label for="email"><i class="fas fa-envelope"></i> อีเมล</label>
<input type="email" class="form-control" id="data5" placeholder="อีเมล" required>
</div>
<div class="form-group col-md-6">
<label for="phone"><i class="fas fa-mobile-alt"></i> เบอร์โทร</label>
<input type="tel" class="form-control" id="data6" placeholder="เบอร์โทร" required>
</div>
</div>
<!-- -------------------------------งานอดิเรก------------------------------------------ -->
<div class="form-group my-3">
<label for="color"><i class="fas fa-book-reader"></i> งานอดิเรก</label>
<div class="form-check form-check-inline">
<input class="form-check-input" name="data7" type="checkbox" id="id1" value="ดูหนัง" required>
<label class="form-check-label" for="inlineCheckbox1">ดูหนัง</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="data7" type="checkbox" id="id2" value="ฟังเพลง" required>
<label class="form-check-label" for="inlineCheckbox2">ฟังเพลง</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="data7" type="checkbox" id="id3" value="เล่นเกม" required>
<label class="form-check-label" for="inlineCheckbox3">เล่นเกม</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="data7" type="checkbox" id="id4" value="เล่นกีฬา" required>
<label class="form-check-label" for="inlineCheckbox3">เล่นกีฬา</label>
</div>
</div>
<!-- -------------------------------กรุ๊ปเลือด------------------------------------------ -->
<div class="row my-3">
<div class="form-group col-md-6">
<label for="inputBlood"><i class="fas fa-bong"></i> กรุ๊ปเลือด</label>
<select id="data8" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="AB">AB</option>
<option value="O">O</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="education"><i class="fas fa-user-graduate"></i> ระดับการศึกษา</label>
<select id="data9" class="form-control" required>
<option selected disabled value="">เลือก..</option>
<option value="ต่ำกว่าปริญญาตรี">ต่ำกว่าปริญญาตรี</option>
<option value="ปริญญาตรี">ปริญญาตรี</option>
<option value="ปริญญาโท">ปริญญาโท</option>
<option value="ปริญญาเอก">ปริญญาเอก</option>
</select>
</div>
</div>
<!-- -------------------------------ที่อยู่------------------------------------------ -->
<div class="row my-3">
<label for="address"><i class="fas fa-address-card"></i> ที่อยู่</label>
<textarea class="form-control" rows="3" id="data10" placeholder="ที่อยู่" required></textarea>
</div>
<!-- -------------------------------อัปโหลดไฟล์1------------------------------------------ -->
<div class="form-group my-3">
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> อัปโหลดไฟล์</label>
<input class="form-control" type="file" name="uploadfile" id="file">
</div>
</div>
<!-- -------------------------------อัปโหลดไฟล์2------------------------------------------ -->
<div class="form-group my-3">
<div class="form-group col-md-6">
<label for="formFile" class="form-label"><i class="fas fa-upload"></i> อัปโหลดไฟล์</label>
<input class="form-control" type="file" name="uploadfile" id="file2">
</div>
</div>
<!-- -------------------------------บันทึกข้อมูล------------------------------------------ -->
<div class="form-group text-center my-3">
<button type="submit" class="btn btn-primary btn-block" id="btn1"><i class="fas fa-cloud-upload-alt"></i> บันทึกข้อมูล</button>
</div>
<div class="form-group">
<button class="btn btn-primary" id="btn2" type="button" disabled style="display : none">
<span class="spinner-grow spinner-grow-sm" role="status" ></span>
กำลังอัปโหลด...
</button>
</div>
</form>
<!-- -------------------------------จบฟอร์ม------------------------------------------ -->
</div>
</div>
</div>
</div>
<div class="card-footer bg-info text-center text-white"><i class="fab fa-pagelines"></i>
ของขวัญปีใหม่ 2565 ขอส่งความสุขนี้ให้กับทุกๆ คน จากครูอภิวัฒน์"สอนสร้างสื่อ"
</div>
</div>
<!-- -------------------------------JAVASCRIPT------------------------------------------ -->
<script>
let imagedata ={}
$('input[type="file"]').on('change',function(){
let files = []
for(var i=0; i<$(this)[0].files.length; i++){
files.push($(this)[0].files[i])
}
files.forEach((file,i)=>{
let reader = new FileReader()
reader.onloadend = (e)=>{
imagedata[$(this).attr('id')+(i+1)]={
data:e.target.result.split(',')[1],
name:file.name,
type:file.type
}
}
reader.readAsDataURL(file)
})
})
function submitForm(obj) {
event.preventDefault();
$('#btn1').hide()
$('#btn2').show()
var obj = {}
obj.data1 = $('#data1').val()
obj.data2 = $('#data2').val()
obj.data3 = $('input[name="data3"]:checked').val()// จัดการตัวเลือกแบบ radiobox
obj.data4 = $('#data4').val()
obj.data5 = $('#data5').val()
obj.data6 = $('#data6').val()
let tmp = [] // จัดการตัวเลือกแบบ checkbox
$('input[name="data7"]:checked').each((i,ele)=>{tmp.push($(ele).val())})
obj.data7 = tmp.join(',')
obj.data8 = $('#data8').val()
obj.data9 = $('#data9').val()
obj.data10 = $('#data10').val()
obj.imagedata = imagedata
savedata(obj)
}
// เมื่อบันทึกไฟล์สำเร็จ
function savedata(obj){
google.script.run.withSuccessHandler(function (success) {
document.getElementById("myForm").reset()
$('#btn1').show()
$('#btn2').hide()
Swal.fire({
position: 'center',
icon: 'success',
title: 'บันทึกข้อมูลเรียบร้อย',
showConfirmButton: false,
timer: 1500
})
})
.saveData(obj);
}
// จัดการตัวเลือกแบบ checkbox ให้เลือกกี่ช่องก็ได้
$(function(){
var checkboxes = $(':checkbox[required]');
checkboxes.change(function(){
if(checkboxes.is(':checked')) {
checkboxes.removeAttr('required');
}
else {
checkboxes.attr('required', 'required');
}
});
});
</script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment