arpeggio068/gist:d00dcdb07e69e9198b4deba5a7258008

## 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/screw-filereader@1.4.3/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--->
	//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/screw-filereader@1.4.3/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--->
No results found