ค้นหาไฟล์ใน Google Drive แบบไดนามิค

bysemicon -
0

 



1. ส่วนของ Google Apps Script (Code.gs)

ฟังก์ชัน doGet


function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('ค้นหาไฟล์ใน Google Drive');
}
  • ฟังก์ชันนี้เป็นเอนด์พอยต์เริ่มต้นของเว็บแอพ
  • หน้าที่:
    • โหลดไฟล์ HTML (Index.html) และแสดงเป็นหน้าเว็บ
    • กำหนดชื่อของเว็บแอพในเบราว์เซอร์ว่า "ค้นหาไฟล์ใน Google Drive"

ฟังก์ชัน searchFiles


function searchFiles(folderId, searchText) {
  try {
    const folder = DriveApp.getFolderById(folderId); // เข้าถึงโฟลเดอร์ตาม Folder ID
    const files = folder.getFiles(); // ดึงรายการไฟล์ในโฟลเดอร์
    const results = []; // สร้างอาเรย์สำหรับเก็บผลลัพธ์

    // วนลูปผ่านไฟล์ทั้งหมดในโฟลเดอร์
    while (files.hasNext()) {
      const file = files.next();
      // ตรวจสอบว่าชื่อไฟล์มีข้อความที่ตรงกับคำค้นหาหรือไม่ (ไม่สนใจตัวพิมพ์ใหญ่/เล็ก)
      if (file.getName().toLowerCase().includes(searchText.toLowerCase())) {
        results.push({
          name: file.getName(), // ชื่อไฟล์
          url: file.getUrl(),   // ลิงก์ไปยังไฟล์
        });
      }
    }

    // คืนค่าผลลัพธ์หากพบไฟล์ที่ตรง หรือข้อความแจ้งหากไม่พบ
    return { success: true, data: results };
  } catch (error) {
    // จัดการข้อผิดพลาดและส่งข้อความแจ้งกลับ
    return { success: false, message: 'เกิดข้อผิดพลาด: ' + error.message };
  }
}
  • ฟังก์ชันนี้ถูกเรียกจากหน้าเว็บ (HTML)
  • หน้าที่:
    • ค้นหาไฟล์ในโฟลเดอร์ตาม Folder ID ที่ได้รับ
    • ตรวจสอบว่าชื่อไฟล์มีข้อความที่ตรงกับ คำค้นหา
    • คืนค่าผลลัพธ์เป็นอาร์เรย์ของไฟล์ที่ตรง หรือข้อความแจ้งหากไม่มีไฟล์ที่ตรง

2. ส่วนของไฟล์ HTML (Index.html)

โครงสร้างของไฟล์

ไฟล์นี้แสดงอินเทอร์เฟซของเว็บแอพ พร้อมรองรับการค้นหาไดนามิก

ส่วนหัว (<head>)


<script>
  function searchFiles() {
    const folderId = document.getElementById('folderId').value;
    const searchText = document.getElementById('searchText').value;

    if (!folderId) {
      document.getElementById('results').textContent = 'กรุณากรอก Folder ID';
      return;
    }

    // เรียกฟังก์ชัน `searchFiles` ใน Google Apps Script
    google.script.run.withSuccessHandler(displayResults)
      .searchFiles(folderId, searchText);
  }

  function displayResults(result) {
    const resultDiv = document.getElementById('results');
    resultDiv.innerHTML = ''; // ล้างผลลัพธ์ก่อนหน้า

    if (result.success && result.data.length > 0) {
      // แสดงรายการไฟล์ในรูปแบบลิงก์
      result.data.forEach(file => {
        const link = document.createElement('a');
        link.href = file.url;
        link.target = '_blank';
        link.textContent = file.name;
        resultDiv.appendChild(link);
        resultDiv.appendChild(document.createElement('br'));
      });
    } else {
      // แสดงข้อความหากไม่พบไฟล์ที่ตรง
      resultDiv.textContent = 'ไม่พบไฟล์ที่ตรงกับคำค้นหา';
    }
  }
</script>

  • searchFiles
    • อ่าน Folder ID และ คำค้นหา จากอินพุตในหน้าเว็บ
    • เรียกฟังก์ชัน searchFiles ใน Google Apps Script ผ่าน google.script.run
    • กำหนดฟังก์ชัน displayResults เป็นตัวจัดการเมื่อได้รับผลลัพธ์สำเร็จ
  • displayResults
    • รับผลลัพธ์จาก Google Apps Script
    • ล้างผลลัพธ์ก่อนหน้า
    • แสดงรายการไฟล์ที่พบในรูปแบบลิงก์ หรือข้อความหากไม่พบไฟล์ที่ตรง

ส่วนเนื้อหา (<body>)


<body>
  <h1>ค้นหาไฟล์ใน Google Drive</h1>
  <label for="folderId">Folder ID:</label>
  <input type="text" id="folderId" placeholder="ใส่ Folder ID">
  <br><br>
  <label for="searchText">คำค้นหา:</label>
  <input type="text" id="searchText" placeholder="ใส่คำค้นหา" oninput="searchFiles()">
  <hr>
  <div id="results"></div>
</body>
  • หน้าที่:
    • อินพุตสำหรับ Folder ID และ คำค้นหา
    • ช่อง คำค้นหา มี oninput="searchFiles()" ทำให้ค้นหาไฟล์แบบไดนามิกขณะพิมพ์
    • แสดงผลลัพธ์ใน <div id="results">

การทำงานทั้งหมด

  1. ผู้ใช้ป้อน Folder ID และ คำค้นหา ในหน้าเว็บ
  2. ฟังก์ชัน searchFiles ถูกเรียกเมื่อมีการพิมพ์ในช่องคำค้นหา
  3. ฟังก์ชัน searchFiles ใน Google Apps Script ค้นหาไฟล์ในโฟลเดอร์ที่ระบุ
  4. ผลลัพธ์ที่พบจะถูกส่งกลับและแสดงใน <div id="results">
  5. ผู้ใช้สามารถคลิกลิงก์ไฟล์เพื่อเปิดใน Google Drive ได้โดยตรง


code.gs


function doGet() {
  return HtmlService.createHtmlOutputFromFile('index')
    .setTitle('ค้นหาไฟล์ใน Google Drive');
}

// ฟังก์ชันค้นหาไฟล์ในโฟลเดอร์
function searchFiles(folderId, searchText) {
  try {
    const folder = DriveApp.getFolderById(folderId);
    const files = folder.getFiles();
    const results = [];

    while (files.hasNext()) {
      const file = files.next();
      if (file.getName().toLowerCase().includes(searchText.toLowerCase())) {
        results.push({
          name: file.getName(),
          url: file.getUrl(),
        });
      }
    }

    return { success: true, data: results };
  } catch (error) {
    return { success: false, message: 'เกิดข้อผิดพลาด: ' + error.message };
  }
}



index.html



<!DOCTYPE html>
<html>
  <head>
    <title>ค้นหาไฟล์ใน Google Drive</title>
    <script>
      function searchFiles() {
        const folderId = document.getElementById('folderId').value;
        const searchText = document.getElementById('searchText').value;

        if (!folderId) {
          document.getElementById('results').textContent = 'กรุณากรอก Folder ID';
          return;
        }

        google.script.run.withSuccessHandler(displayResults)
          .searchFiles(folderId, searchText);
      }

      function displayResults(result) {
        const resultDiv = document.getElementById('results');
        resultDiv.innerHTML = '';

        if (result.success && result.data.length > 0) {
          result.data.forEach(file => {
            const link = document.createElement('a');
            link.href = file.url;
            link.target = '_blank';
            link.textContent = file.name;
            resultDiv.appendChild(link);
            resultDiv.appendChild(document.createElement('br'));
          });
        } else {
          resultDiv.textContent = 'ไม่พบไฟล์ที่ตรงกับคำค้นหา';
        }
      }
    </script>
  </head>
  <body>
   
    <h1>ค้นหาไฟล์ใน Google Drive</h1>
    <label for="folderId">Folder ID:</label>
    <input type="text" id="folderId" placeholder="ใส่ Folder ID">
    <br><br>
    <label for="searchText">คำค้นหา:</label>
    <input type="text" id="searchText" placeholder="ใส่คำค้นหา" oninput="searchFiles()">
    <hr>
    <div id="results"></div>
   
  </body>
</html>

 


ถ้ามีประโยชน์โปรดสนับสนุนเพื่อเป็นกำลังใจในการพัฒนาต่อไป




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