Skip to content

Instantly share code, notes, and snippets.

@arpeggio068

arpeggio068/gist:d00dcdb07e69e9198b4deba5a7258008

Last active December 18, 2023 05:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save arpeggio068/d00dcdb07e69e9198b4deba5a7258008 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save arpeggio068/d00dcdb07e69e9198b4deba5a7258008 to your computer and use it in GitHub Desktop.
Download ZIP
form upload pic
Raw
gistfile1.txt
//Code.gs
var ss = SpreadsheetApp.getActive();
var folderId = "Your Google Drive Folder ID";
var sheet = ss.getSheets()[0];
var token='Your Line Token';
function doGet(e) {
return HtmlService.createTemplateFromFile("form").evaluate()
.setTitle("ฟอร์มรายงานจุดเสี่ยง")
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
function uploadFiles(formObject) {
var file = formObject.myFile;
var folder = DriveApp.getFolderById(folderId);
var createFile = folder.createFile(file);
return createFile.getUrl();
}
function addNewRow(rowData) {
var sp1,sp2,msg;
var files = DriveApp.getFilesByName(rowData.img);
const currentDate = new Date();
while (files.hasNext()) {
var file = files.next();
var linkFile = file.getUrl();
var sizeFileTemp = file.getSize();
var sizeFile = (sizeFileTemp / 1000).toString() + " KB";
}
if(rowData.img == ""){
linkFile = "";
}
sheet.appendRow([currentDate,
rowData.d1,
rowData.d2,
rowData.d3,
"'"+rowData.d4,
rowData.img,
linkFile
])
if(rowData.img !==""){
sp1 = linkFile.split('d/')[1];
sp2 = sp1.split('/view')[0] ;
msg = "แจ้งจุดเสี่ยง"+
"\nผู้แจ้ง: "+rowData.d1+
"\nจุดที่พบ: "+rowData.d2+
"\nรายละเอียด: "+rowData.d3+
"\nเบอร์โทรศัพท์: "+rowData.d4+
"\nลิงค์รูป: "+linkFile
;
sendLineNotify(msg,sp2);
}
else{
msg = "แจ้งจุดเสี่ยง"+
"\nผู้แจ้ง: "+rowData.d1+
"\nจุดที่พบ: "+rowData.d2+
"\nรายละเอียด: "+rowData.d3+
"\nเบอร์โทรศัพท์: "+rowData.d4
;
sendLineNotify2(msg);
}
return true;
}
function sendLineNotify(message, imgId) {
var picURL = 'https://drive.google.com/uc?export=view&id=' +imgId;
var formData = {
'message' : message,
'imageThumbnail': picURL,
'imageFullsize' : picURL}
var options = {
"method" : "post",
"payload" : formData,
"headers" : {"Authorization" : "Bearer " + token}};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
function sendLineNotify2(messageonly) {
var formData = {
'message' : messageonly,
}
var options = {
"method" : "post",
"payload" : formData,
"headers" : {"Authorization" : "Bearer " + token}};
UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
<!---form.html--->
<!doctype html>
<html lang="en">
<head>
<base target="_self">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href='https://fonts.googleapis.com/css?family=Assistant' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Prompt' rel='stylesheet'>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<?!= include("page-css"); ?>
</head>
<body>
<div class="container" id="app">
<form onsubmit="sendPicToDrive(this)" method="post" >
<!--- Frame perizinan -->
<div class="z-depth-4" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;"
id="divMenuUraianKerja">
<!-- <span class="black-text"></span> -->
<div class="card-panel b2ff59 light-green accent-2 black-text">
<h6 style="font-size:24px;">รายงาน</br>แจ้งจุดเสี่ยง</h6>
<div class="center"> <img src="https://drive.google.com/uc?view&id=1tibnj78BFDCJueiZV8JHxl8WJKHj-L-M" width="160px" height="60px">
</div>
</div>
<div class="container questionBox mb-4">
<div class="input-field col s12">
<i class="material-icons" style="color:#00796b"></i>
<input style="color: black" type="text" id="d1" value="" placeholder="ชื่อ สกุล ผู้รายงาน*" >
<label for="d1" style="color:black;font-size:25px" class="required">ชื่อ สกุล</label>
</div><br>
<div class="input-field col s12">
<i class="material-icons" style="color:#00796b"></i>
<input style="color: black" type="text" id="d2" value="" placeholder="จุดที่พบเหตุการณ์*" >
<label for="d2" style="color:black;font-size:25px" class="required">จุดที่พบ</label>
</div><br>
<div class="input-field col s12">
<i class="material-icons" style="color:#00796b"></i>
<input style="color: black" type="text" id="d3" value="" placeholder="รายละเอียดเหตุการณ์*" >
<label for="d3" style="color:black;font-size:25px" class="required">รายละเอียด</label>
</div><br>
<div class="input-field col s12">
<i class="material-icons" style="color:#00796b"></i>
<input style="color: black" type="text" id="d4" value="" placeholder="เบอร์โทรศัพท์ผู้รายงาน*" >
<label for="d4" style="color:black;font-size:25px" class="required">เบอร์โทรศัพท์</label>
</div><br>
</div> <!-- Close container questionBox mb-4 -->
<center>
<div class="row questionBox">
<i class="material-icons" style="color:#00796b">file_upload</i>
<span id="displaytext" style="font-size:18px; color:black;">อัพโหลดรูปภาพ</span><br><br>
<img src="" id="image" >
<input style="color:black;" type="file" name="myFile" id = "img_input" accept="image/*">
<span id="resp-spinnerA" class="spinner-border spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
<br><br>
</div>
</center><br>
<div id="divMainButton2" >
<center>
<button style="background-color: #4db6ac; color: white;" class="btn waves-effect waves-light" type="submit" id = "mainButton2"name="mainButton2"><b>ส่งรายงาน</b><i class="material-icons right">send</i> </button>
<span id="resp-spinner5" class="spinner-grow spinner-grow-sm text-danger d-none" role="status" aria-hidden="true"></span>
<span id="resp-spinner6" class="spinner-grow spinner-grow-sm text-warning d-none" role="status" aria-hidden="true"></span>
<span id="resp-spinner7" class="spinner-grow spinner-grow-sm text-info d-none" role="status" aria-hidden="true"></span>
</center>
</div>
</form>
</div><!--Close container -->
<center>
<footer class="footer">
<section class="container">
<p style="font-size:10px;">
<a target="_blank" href="https://web.facebook.com/?_rdc=1&_rdr"
title="Consulthink Programmer">Apichat</a>
<a style="color:red;" target="_blank"
href="http://ckhos.go.th/ckweb/index.php" title="CKHOS"> |
CKHOS</a>
</p>
</section>
</footer>
</center>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<?!= include("page-js"); ?>
</body>
</html>
<!---form.html--->
<!---page-css--->
<style>
canvas{
display: none;
}
.container {
margin-top: 3em !important;
}
h6{text-align: center;}
#frame{
border: 1px solid rgba(0,0,0,0.2);
padding: 20px;
margin-left:10px;
margin-right:10px;
margin-top: 2px;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
#divKategoriBaru {
border: 1px solid rgba(0,0,0,0.2);
padding: 20px;
margin-left:10px;
margin-right:10px;
margin-top: 2px;
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px #888888;
}
#divMenuUraianKerja{
border: 1px solid rgba(0,0,0,0.2);
padding: 20px;
margin-left:10px;
margin-right:10px;
margin-top: 15px;
font-family: 'Prompt';
}
.swal-modal .swal-text {
text-align: center;
}
.questionBox {
border: 1px solid rgba(0,0,0,0.2);
padding: 1.5rem;
margin-left:10px;
margin-right:10px;
border-radius: 13px;
margin: auto;
width: 100%;
}
label.required::before {
content: '*';
margin-right: 4px;
color: red;
}
</style>
<!---page-css--->
<!---page-js--->
<script>
function preventFormSubmit(){
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
function checkTextValid(){
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
var d4 = document.getElementById("d4");
if(d1.value.trim().length == 0 || d2.value.trim().length == 0 || d3.value.trim().length == 0
|| d4.value.trim().length == 0
){ return false; }
else{return true;}
}
function addRecord(){
var img = "";
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
var d4 = document.getElementById("d4");
//var d5 = document.getElementById("d5");
var input = document.getElementsByName('myFile')[0];
if(input !== ""){
var file = input.value.split("\\");
img = file[file.length-1];
}
var rowData = {
d1: d1.value,
d2: d2.value,
d3: d3.value,
d4: d4.value,
img: img
}
if(d1.value.trim().length == 0 || d2.value.trim().length == 0 || d3.value.trim().length == 0
|| d4.value.trim().length == 0
){
sweetAlert({text: "Warning!!!"+"\n\n"+"ต้องกรอกข้อมูลที่จำเป็น", icon:"error", timer:3000})
}else{
document.getElementById('resp-spinner5').classList.remove("d-none");
document.getElementById('resp-spinner6').classList.remove("d-none");
document.getElementById('resp-spinner7').classList.remove("d-none");
google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData);
}
}
function afterSubmit(){
document.getElementById('resp-spinner5').classList.add("d-none");
document.getElementById('resp-spinner6').classList.add("d-none");
document.getElementById('resp-spinner7').classList.add("d-none");
document.getElementById("d1").value="";
document.getElementById("d2").value="";
document.getElementById("d3").value="";
document.getElementById("d4").value="";
document.getElementById("img_input").value="";
sweetAlert({text: "ส่งข้อมูลให้ทีม"+"\n\n"+"เรียบร้อยแล้ว", icon:"success", timer:3000})
document.getElementById('mainButton2').disabled = false;
}
function fileListItem(a) {
a = [].slice.call(Array.isArray(a) ? a : arguments)
for (var c, b = c = a.length, d = !0; b-- && d;) d = a[b] instanceof File
if (!d) throw new TypeError("expected argument to FileList is File or array of File objects")
for (b = (new ClipboardEvent("")).clipboardData || new DataTransfer; c--;) b.items.add(a[c])
return b.files
}
img_input.onchange = async function change(){
const maxWidth = 320 //set picture resize here
const maxHeight = 240 //set picture resize here
const result = []
for(const file of this.files){
document.getElementById('displaytext').innerHTML = "กำลังโหลดตัวอย่างภาพ...";
document.getElementById('image').src = "";
const canvas = document.createElement('canvas')
canvas.setAttribute("id", "canvasID");
//canvas.setAttribute("type", "hidden");
const ctx = canvas.getContext('2d')
const img = await file.image()
// calculate new size
const ratio = Math.min(maxWidth / img.width, maxHeight / img.height)
const width = img.width * ratio + .5 | 0
const height = img.height * ratio + .5 | 0
// resize the canvas to the new dimensions
canvas.width = width
canvas.height = height
// scale & draw the image onto the canvas
ctx.drawImage(img, 0, 0, width, height)
// just to preview
document.body.appendChild(canvas)
// Get the binary (aka blob)
const blob = await new Promise(rs => canvas.toBlob(rs, 1))
const resizedFile = new File([blob], file.name, file)
result.push(resizedFile)
var dataurl = canvas.toDataURL("image/png");
document.getElementById('image').src = dataurl;
document.getElementById('displaytext').innerHTML = "อัพโหลดรูปภาพ";
}
const fileList = new fileListItem(result);
img_input.onchange = null
img_input.files = fileList
img_input.onchange = change
}
function sendPicToDrive(formObject){
if(checkTextValid()){
document.getElementById('mainButton2').disabled = true;
if(document.getElementsByName('myFile')[0].value !== "" ){
google.script.run.withSuccessHandler(function(){
onSuccess();
addRecord();
}).uploadFiles(formObject);
}
else{
addRecord();
}
} else {
sweetAlert({text: "Warning!!!"+"\n\n"+"ต้องกรอกข้อมูลที่จำเป็น", icon:"error", timer:3000})
}
}
function onSuccess(data){
document.getElementById('resp-spinnerA').classList.add("d-none");
document.getElementById('image').src = "";
sweetAlert({text: "อัพโหลดภาพสำเร็จ", icon:"success", timer:3000})
clearCanvas();
}
function clearCanvas(){
const foundCanvas = [...document.querySelectorAll("canvas")].length;
for(var i = 0; i < foundCanvas; i++){
var canvas = document.getElementById('canvasID');
canvas.remove();
}
document.getElementById('image').src = "";
}
function trim_text(el){
el.value = el.value.
replace(/(^\s*)|(\s*$)/gi, ""). // removes leading and trailing spaces
replace(/[ ]{2,}/gi, " "). // replaces multiple spaces with one space
replace(/\n +/, "\n"); // Removes spaces after newlines
return;
}
function letGoTrim(){
$(function(){
$("textarea").change(function(){
trim_text(this);
});
$("input").change(function(){
trim_text(this);
});
});
}
document.addEventListener("DOMContentLoaded",function(){
letGoTrim();
preventFormSubmit();
});
</script>
<!---page-js--->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment