📌 เจาะลึกการทำงานของ "ระบบอัปโหลดขั้นสูง

📌 เจาะลึกการทำงานของ "ระบบอัปโหลดขั้นสูง (Advanced Upload System)" ในโปรเจกต์ ระบบคลังสื่อการเรียนรู้ (Knowledge Hub) ครับ

ระบบนี้ถูกออกแบบมาเพื่อแก้ปัญหาคอขวด (Bottleneck) ของ Google Apps Script (GAS) โดยเฉพาะ ซึ่งปกติ GAS จะรับไฟล์ได้ขนาดจำกัด (ไม่เกิน 50MB) และมักจะเกิด Time-out หากอัปโหลดนาน แต่ระบบนี้ใช้คือเทคนิค "Direct Resumable Upload to Google Drive API" ครับ

🧱 หลักการทำงานภาพรวม (Concept)

แทนที่จะส่งไฟล์จาก Client (หน้าเว็บ) ➔ GAS Server ➔ Google Drive (ซึ่งช้าและติด Limit) ระบบนี้จะส่งไฟล์จาก Client (หน้าเว็บ) ➔ Google Drive API โดยตรง

GAS Server จะทำหน้าที่แค่ "ผู้ประสานงาน" (ให้กุญแจเข้าบ้าน และ รับเลขที่เอกสารไปบันทึก) แต่ไม่ได้เป็นคนขนย้ายของเอง

🛠️ เจาะลึกโค้ดทีละส่วน

1️⃣ ฝั่ง Client (script.html)

นี่คือส่วนที่ทำงานหนักที่สุด โดยมีฟังก์ชันหัวใจหลัก 2 ตัวครับ:

ฟังก์ชัน A: performUploadsAndSubmit (ผู้จัดการการอัปโหลด) ทำหน้าที่ควบคุม Flow การทำงานทั้งหมด:

1. ขอ Token: เรียก getAuthToken() จาก Server เพื่อขอกุญแจชั่วคราว (OAuth Token) สำหรับเข้าถึง Drive

2. วนลูปอัปโหลด: นำไฟล์ในคิวมาทีละไฟล์ แล้วส่งไปให้ฟังก์ชัน uploadFileResumable

3. ส่งข้อมูลเข้า Sheet: เมื่อได้ File ID ครบทุกไฟล์แล้ว ค่อยส่งข้อมูล (Metadata + File ID) ไปบันทึกลง Sheet ผ่าน google.script.run.saveResource()

async function performUploadsAndSubmit(payload, fileList, submitFunc) {

    // 1. ขอกุญแจ (Token)

    var token = await new Promise((resolve, reject) => { 

        google.script.run.withSuccessHandler(resolve).getAuthToken(); 

    });

    // 2. วนลูปอัปโหลดทีละไฟล์

    for (var i = 0; i < fileList.length; i++) {

        // เรียกฟังก์ชัน B เพื่อยิงไฟล์เข้า Drive โดยตรง

        var fileId = await uploadFileResumable(fileList[i], token, (percent) => {

            // อัปเดต Progress bar

            showLoader(true, '... (' + percent + '%)');

        });

        // เก็บ File ID ไว้ใช้งาน

        uploadedFiles.push({ id: fileId, ... });

    }

    // 3. ส่งแค่ "File ID" ไปบันทึก (ไม่ใช่ตัวไฟล์)

    submitFunc(payload); 

}

ฟังก์ชัน B: uploadFileResumable (คนขนของ) นี่คือเทคนิคขั้นสูง ใช้ fetch และ XMLHttpRequest ยิง API ของ Google Drive:

1. Init (POST): ส่ง metadata (ชื่อไฟล์, ประเภท) ไปบอก Google ว่า "กำลังจะส่งไฟล์ไปนะ"

2. Get Location: Google จะตอบกลับมาพร้อม Location URL (ลิ้งค์สำหรับอัปโหลด)

3. Upload (PUT): ส่งเนื้อไฟล์ (Binary) ไปที่ Location URL นั้น พร้อมตัวจับ Progress

function uploadFileResumable(file, accessToken, onProgress) {

    return new Promise((resolve, reject) => {

        // ...เตรียม Metadata...

        

        // 1. เริ่มต้น Session (POST)

        fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=resumable', {

            method: 'POST',

            headers: { 'Authorization': 'Bearer ' + accessToken, ... },

            body: JSON.stringify(metadata)

        }).then(response => {

            // 2. รับ URL ปลายทาง

            return response.headers.get('Location');

        }).then(locationUrl => {

            // 3. ส่งไฟล์จริง (PUT) ผ่าน XMLHttpRequest เพื่อวัด % ได้

            var xhr = new XMLHttpRequest();

            xhr.open('PUT', locationUrl, true);

            

            // สูตรคำนวณ % การอัปโหลด

            xhr.upload.onprogress = (e) => { 

                if (e.lengthComputable) onProgress(Math.round((e.loaded / e.total) * 100)); 

            };

            

            xhr.onload = () => resolve(JSON.parse(xhr.responseText).id); // ส่งคืน File ID

            xhr.send(reader.result); // ส่งข้อมูลไฟล์

        });

    });

}

2️⃣ ฝั่ง Server (Code.gs)

ฝั่ง Server ทำงานเบามาก มีหน้าที่แค่ 2 อย่าง:

ฟังก์ชัน 1: getAuthToken (คนแจกกุญแจ)

function getAuthToken() {

  // ขอ Token ของ User ปัจจุบันเพื่อส่งให้ Client ใช้ยิง API

  return ScriptApp.getOAuthToken();

}

ฟังก์ชัน 2: _processUploadedFile (คนจัดของเข้าชั้น) เมื่อ Client อัปโหลดเสร็จและได้ File ID มาแล้ว Server จะรับ ID นั้นมา "ย้ายที่" และ "เปลี่ยนชื่อ"

function _processUploadedFile(fileId, targetFolder, newNamePrefix) {

    var file = DriveApp.getFileById(fileId); // จับไฟล์ด้วย ID

    

    // เปลี่ยนชื่อไฟล์ (เช่น เติม Prefix Cover_)

    if (newNamePrefix) {

       file.setName(newNamePrefix + "_" + file.getName());

    }

    

    // ตั้งค่าให้ใครก็ได้ที่มีลิงก์ดูได้ (สำคัญมากสำหรับการแสดงผล)

    file.setSharing(DriveApp.Access.ANYONE_WITH_LINK, DriveApp.Permission.VIEW);

    

    // ย้ายเข้า Folder ที่ถูกต้อง

    if (targetFolder) {

       file.moveTo(targetFolder);

    }

    return file.getId();

}

🏆 สรุปข้อดีของระบบนี้ (ทำไมถึง Pro?)

1. No Size Limit (Virtually): คุณสามารถอัปโหลดไฟล์ขนาด 100MB หรือ 500MB ได้สบายๆ เพราะไม่ได้วิ่งผ่าน Server ของ Apps Script

2. No Timeout: การอัปโหลดเกิดขึ้นระหว่าง Browser กับ Google Drive โดยตรง ทำให้ GAS ไม่ตัดการทำงานแม้จะอัปโหลดนานเกิน 6 นาที

3. Real Progress Bar: สามารถแสดง % การอัปโหลดให้ผู้ใช้เห็นได้จริง (เพราะใช้ XMLHttpRequest ฝั่ง Client) ซึ่ง google.script.run ทำไม่ได้

4. Server Load Reduced: Server ไม่ต้องประมวลผลไฟล์ Blob ทำให้รองรับผู้ใช้งานพร้อมกันได้มากขึ้น

นี่คือสถาปัตยกรรมการอัปโหลดที่ดีที่สุดเท่าที่จะทำได้บน Google Apps Script ในปัจจุบันครับ