Google Apps Script สำหรับอัปโหลดรูปภาพไปยัง Google Drive

bysemicon -
0


1. HTML (Client-Side)

สร้างอินเทอร์เฟซเพื่ออัปโหลดไฟล์:

<!DOCTYPE html>
<html>
  <head>
    <title>Upload Image to Google Drive</title>
  </head>
  <body>
    <h3>Upload Image</h3>
    <form id="uploadForm">
      <input type="file" id="fileInput" name="file" accept="image/*" />
      <button type="button" onclick="uploadFile()">Upload</button>
    </form>
    <div id="output"></div>

    <script>
      function uploadFile() {
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];

        if (!file) {
          document.getElementById('output').textContent = 'Please select a file!';
          return;
        }

        const reader = new FileReader();
        reader.onload = function (event) {
          const fileData = event.target.result.split(',')[1]; // Base64 string
          google.script.run
            .withSuccessHandler((url) => {
              document.getElementById('output').innerHTML = `Upload Successful! <br> <a href="${url}" target="_blank">View File</a>`;
            })
            .withFailureHandler((error) => {
              document.getElementById('output').textContent = `Error: ${error}`;
            })
            .uploadToDrive(file.name, fileData);
        };
        reader.readAsDataURL(file);
      }
    </script>
  </body>
</html>

2. Google Apps Script (Server-Side)

เพิ่มฟังก์ชันใน Apps Script เพื่อจัดการการอัปโหลด:

function doGet() {
  return HtmlService.createTemplateFromFile('index').evaluate()
    .setTitle("Project Kru Chian")
    .setFaviconUrl("https://semicon.github.io/img/logo2small.png")
    .addMetaTag('viewport', 'width=device-width , initial-scale=1')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
    .setSandboxMode(HtmlService.SandboxMode.IFRAME)
}

function uploadToDrive(fileName, fileData) {
  try {
    const folderId = 'YOUR_FOLDER_ID'; // ใส่ Folder ID ของ Google Drive ที่ต้องการเก็บไฟล์
    const folder = DriveApp.getFolderById(folderId);
    const blob = Utilities.newBlob(Utilities.base64Decode(fileData), 'image/jpeg', fileName);
    const file = folder.createFile(blob);
    return file.getUrl(); // ส่ง URL กลับไปที่ Client-Side
  } catch (e) {
    throw new Error('Failed to upload the file: ' + e.message);
  }
}

3. ขั้นตอนการใช้งาน

  1. สร้างไฟล์ HTML ชื่อ index.html และใส่โค้ด HTML ที่ให้ไว้ด้านบนลงไป
  2. เพิ่มโค้ด Google Apps Script ลงใน Code.gs หรือไฟล์สคริปต์อื่น
  3. แทนที่ YOUR_FOLDER_ID ด้วย Folder ID ของ Google Drive ที่ต้องการเก็บรูปภาพ
    (สามารถหา Folder ID ได้จาก URL ของโฟลเดอร์ เช่น https://drive.google.com/drive/folders/ABC123... → Folder ID คือ ABC123...)
  4. ดีพลอย (Deploy) เป็น Web App โดยตั้งค่าการเข้าถึงให้เป็น Anyone หรือ Anyone with link
    • ไปที่ Deploy > New Deployment
    • เลือก Web app และกำหนด Execute as เป็น Me และ Who has access เป็น Anyone.





Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า