krooluang/ส่งไลน์แนบภาพ index

## ส่งไลน์แนบภาพ index
<!DOCTYPE html>
<html lang="en">

<head>
  <base target="_top">
  <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.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

    body{
      font-family: 'Kanit', sans-serif;
      font-size: .875rem;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="col-md-8 mx-auto">

      <form id="myForm" onsubmit="saveForm(this)">
        <div class="col-md-12 text-center">
          <h5 class="mb-2 p-2 bg-success text-white"><i class="fa-solid fa-align-justify"></i> ฟอร์มลงทะเบียน</h5>
        </div>
        <div class="row">
          <div class="col-md-6 mb-2">
            <label ><i class="fa-solid fa-circle-user"></i> ชื่อ สกุล</label>
  <input type="text" class="form-control" id="firstname" name="firstname" placeholder="กรุณาพิมพ์ชื่อ สกุล" required >
          </div>
           <div class="col-md-6 mb-2">
            <label ><i class="fa-solid fa-school"></i> ชั้น</label>
            <select class="form-control"  id="classroom" name="classroom" required>
                <option disabled selected value="">เลือกชั้น</option>
                <option>ป.1</option>
                <option>ป.2</option>
                <option>ป.3</option>
                <option>ป.4</option>
                <option>ป.5</option>
                <option>ป.6</option>
            </select>
          </div>
           </div>

           <div class="row">
          <div class="col-md-6 mb-2">
            <label ><i class="fa-solid fa-calendar-days"></i> วันเกิด </label>
            <input type="date" class="form-control" id="bd" name="bd" required>
          </div>

          <div class="col-md-6 mb-2">
            <label class="mb-2"><i class="fa-solid fa-children"></i> เพศ </label><br>
            <input type="radio" class="form-check-input me-2"  id="gender"  name="gender" value="ชาย" required>
            <label  class="form-check-label me-2">ชาย</label>
            <input type="radio" class="form-check-input me-2" id="gender" name="gender" value="หญิง" required>
            <label class="form-check-label me-2">หญิง</label>
          </div>
          </div>

          <div class="col-md-12 mb-2">
            <label><i class="fa-solid fa-file-pen"></i> หมายเหตุ </label>
  <textarea type="text" class="form-control" id="note" name="note" placeholder="หมายเหตุ" ></textarea>
          </div>

           <div class="col-md-12 mb-2">
            <label ><i class="fa-solid fa-calendar-days"></i> ภาพ </label>
            <input type="file" class="form-control" id="myFile" name="myFile" accept="image/*" required>
          </div>

            <div class="col-md-12 mt-2">
              <button type="submit" class="btn btn-success col-12" id="btn1" ><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูล</button>
       <button class="btn btn-success col-12" type="button" id="btn2" style="display:none" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  กำลังบันทึก...
</button>
            </div>
      </form>
    </div>
  </div>

  <script>
    function saveForm(obj){
        event.preventDefault()
        document.getElementById('btn1').style.display="none";
        document.getElementById('btn2').style.display="block";
        google.script.run.withSuccessHandler(success).saveData(obj)
       }

    function success(){
      document.getElementById('myForm').reset()
      document.getElementById('btn2').style.display="none";
      document.getElementById('btn1').style.display="block";
      Swal.fire({
        position: 'top',
        icon: 'success',
        title: 'บันทึกข้อมูลเรียบร้อย',
        showConfirmButton: false,
        timer: 1500
      })

    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>

</html>

## ส่งไลน์แนบรูปภาพ
function doGet() {
  return HtmlService.createTemplateFromFile('index')
  .evaluate()
  .setTitle('FormSubmit')
  .addMetaTag('viewport', 'width=device-width, initial-scale=1')
  .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
}

function saveData(obj){
   let ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]
   let folder = DriveApp.getFolderById('xxxx')  //เปลี่ยนไอดีโฟลเดอร์
   let file = folder.createFile(obj.myFile).getId()
  // let ucFile = "https://drive.google.com/uc?id="+file

        ss.appendRow([
        new Date(),
        obj.firstname,
        obj.classroom,
        obj.bd,
        obj.gender,
        obj.note,
       // ucFile
        ])

/**ชุดส่งไลน์ */
var token = "xxx"  //เปลี่ยนโทเคน
var msg ="แจ้งเตือน"+
         '\nชื่อสกุล '+obj.firstname+
         '\nชั้น '+obj.classroom+
         '\nวันเกิด '+obj.bd+
         '\nเพศ '+obj.gender

     var image = DriveApp.getFileById(file).getBlob()


    sendNotify(msg,token,image);

//กรณีลบไฟล์ทิ้งลงถังขยะ
   // DriveApp.getFileById(file).setTrashed(true)
}

function sendNotify(msg,token,image){
let payloadJson = {
  "message":msg,
  "imageFile" : image
    };
    let options = {
        "method": "post",
        "payload": payloadJson,
        "headers": {
            "Authorization": "Bearer " + token
        }
    };
    UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<base target="_top">
	<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.1.1/css/all.min.css"
	integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
	crossorigin="anonymous" referrerpolicy="no-referrer" />
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

	body{
	font-family: 'Kanit', sans-serif;
	font-size: .875rem;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<div class="col-md-8 mx-auto">

	<form id="myForm" onsubmit="saveForm(this)">
	<div class="col-md-12 text-center">
	<h5 class="mb-2 p-2 bg-success text-white"><i class="fa-solid fa-align-justify"></i> ฟอร์มลงทะเบียน</h5>
	</div>
	<div class="row">
	<div class="col-md-6 mb-2">
	<label ><i class="fa-solid fa-circle-user"></i> ชื่อ สกุล</label>
	<input type="text" class="form-control" id="firstname" name="firstname" placeholder="กรุณาพิมพ์ชื่อ สกุล" required >
	</div>
	<div class="col-md-6 mb-2">
	<label ><i class="fa-solid fa-school"></i> ชั้น</label>
	<select class="form-control" id="classroom" name="classroom" required>
	<option disabled selected value="">เลือกชั้น</option>
	<option>ป.1</option>
	<option>ป.2</option>
	<option>ป.3</option>
	<option>ป.4</option>
	<option>ป.5</option>
	<option>ป.6</option>
	</select>
	</div>
	</div>

	<div class="row">
	<div class="col-md-6 mb-2">
	<label ><i class="fa-solid fa-calendar-days"></i> วันเกิด </label>
	<input type="date" class="form-control" id="bd" name="bd" required>
	</div>

	<div class="col-md-6 mb-2">
	<label class="mb-2"><i class="fa-solid fa-children"></i> เพศ </label><br>
	<input type="radio" class="form-check-input me-2" id="gender" name="gender" value="ชาย" required>
	<label class="form-check-label me-2">ชาย</label>
	<input type="radio" class="form-check-input me-2" id="gender" name="gender" value="หญิง" required>
	<label class="form-check-label me-2">หญิง</label>
	</div>
	</div>

	<div class="col-md-12 mb-2">
	<label><i class="fa-solid fa-file-pen"></i> หมายเหตุ </label>
	<textarea type="text" class="form-control" id="note" name="note" placeholder="หมายเหตุ" ></textarea>
	</div>

	<div class="col-md-12 mb-2">
	<label ><i class="fa-solid fa-calendar-days"></i> ภาพ </label>
	<input type="file" class="form-control" id="myFile" name="myFile" accept="image/*" required>
	</div>

	<div class="col-md-12 mt-2">
	<button type="submit" class="btn btn-success col-12" id="btn1" ><i class="fa-solid fa-floppy-disk"></i> บันทึกข้อมูล</button>
	<button class="btn btn-success col-12" type="button" id="btn2" style="display:none" disabled>
	<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	กำลังบันทึก...
	</button>
	</div>
	</form>
	</div>
	</div>

	<script>
	function saveForm(obj){
	event.preventDefault()
	document.getElementById('btn1').style.display="none";
	document.getElementById('btn2').style.display="block";
	google.script.run.withSuccessHandler(success).saveData(obj)
	}

	function success(){
	document.getElementById('myForm').reset()
	document.getElementById('btn2').style.display="none";
	document.getElementById('btn1').style.display="block";
	Swal.fire({
	position: 'top',
	icon: 'success',
	title: 'บันทึกข้อมูลเรียบร้อย',
	showConfirmButton: false,
	timer: 1500
	})

	}
	</script>
	<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
	</body>

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

	function saveData(obj){
	let ss = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0]
	let folder = DriveApp.getFolderById('xxxx') //เปลี่ยนไอดีโฟลเดอร์
	let file = folder.createFile(obj.myFile).getId()
	// let ucFile = "https://drive.google.com/uc?id="+file

	ss.appendRow([
	new Date(),
	obj.firstname,
	obj.classroom,
	obj.bd,
	obj.gender,
	obj.note,
	// ucFile
	])

	/*ชุดส่งไลน์ /
	var token = "xxx" //เปลี่ยนโทเคน
	var msg ="แจ้งเตือน"+
	'\nชื่อสกุล '+obj.firstname+
	'\nชั้น '+obj.classroom+
	'\nวันเกิด '+obj.bd+
	'\nเพศ '+obj.gender

	var image = DriveApp.getFileById(file).getBlob()


	sendNotify(msg,token,image);

	//กรณีลบไฟล์ทิ้งลงถังขยะ
	// DriveApp.getFileById(file).setTrashed(true)
	}

	function sendNotify(msg,token,image){
	let payloadJson = {
	"message":msg,
	"imageFile" : image
	};
	let options = {
	"method": "post",
	"payload": payloadJson,
	"headers": {
	"Authorization": "Bearer " + token
	}
	};
	UrlFetchApp.fetch("https://notify-api.line.me/api/notify", options);
	}