Tutorial Upload File ke Google Drive dari Website

Oleh Uboiz (Edugameapp) - Oktober 08, 2025

Panduan ini adalah hasil diskusi penulis dengan aplikasi ChatGPT yang menjelaskan cara membuat sistem upload file langsung dari website Anda ke Google Drive menggunakan kombinasi HTML/JavaScript (Frontend), PHP (Proxy), dan Google Apps Script (Backend).

Langkah 1: Siapkan Google Apps Script (Backend)

Kode ini berfungsi sebagai Backend yang memiliki izin untuk berinteraksi langsung dengan Google Drive API.

PENTING: Ganti "id folder" di baris kode dengan ID folder tujuan Anda di Google Drive.

Kode Apps Script (`Code.gs`)

function doPost(e) {
  try {
    // Memproses data JSON yang dikirim oleh PHP Proxy
    const data = JSON.parse(e.postData.contents);
    const folderId = "id folder"; // <-- GANTI DENGAN ID FOLDER GOOGLE DRIVE ANDA

    // Fallback data
    const fileName = data.filename || "tanpa_nama";
    const mimeType = data.mimeType || "application/octet-stream";
    
    // Mendekode konten Base64
    const content = Utilities.base64Decode(data.content);

    // Membuat Blob file
    const blob = Utilities.newBlob(content, mimeType, fileName);
    
    // Mengunggah ke Google Drive
    const folder = DriveApp.getFolderById(folderId);
    const file = folder.createFile(blob);

    // Siapkan respons sukses untuk dikembalikan ke PHP Proxy
    const result = {
      success: true,
      fileId: file.getId(),
      fileUrl: file.getUrl(),
      name: file.getName(),
      mimeType: file.getMimeType(),
    };

    return ContentService.createTextOutput(JSON.stringify(result))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (err) {
    // Siapkan respons error
    const errorResult = {
      success: false,
      message: err.message,
    };
    return ContentService.createTextOutput(JSON.stringify(errorResult))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

Deploy Web App:

Setelah menyimpan kode di atas, klik Deploy (Terapkan) → New deployment (Deployment baru).
Pilih Type (Jenis) sebagai Web app.
Atur Execute as (Jalankan sebagai) ke Me (akun Anda).
Atur Who has access (Siapa yang memiliki akses) ke Anyone (Siapa saja).
Klik Deploy. Salin URL Web App yang dihasilkan. Anda akan menggunakannya di Langkah 2.

Langkah 2: Buat PHP Proxy (`upload-proxy.php`)

File ini adalah perantara (Proxy) yang mengatasi isu CORS dan meneruskan data Base64 dari website ke Apps Script.

PENTING: GANTI variabel $scriptUrl dengan URL Web App yang Anda dapatkan dari Langkah 1.

Kode PHP (`upload-proxy.php`)

<?php
// Header CORS: Izinkan akses dari domain manapun
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    exit(0);
}

// <-- GANTI DENGAN URL WEB APP ANDA DARI LANGKAH 1 -->
$scriptUrl = "https://script.google.com/macros/s/ID_APPS_SCRIPT_ANDA/exec";

// Ambil data JSON mentah dari klien
$data = file_get_contents('php://input');

// Inisiasi cURL untuk meneruskan permintaan ke Apps Script
$ch = curl_init($scriptUrl);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, ['Content-Type: application/json']);
$response = curl_exec($ch);
curl_close($ch);

// Pastikan respons dari Apps Script adalah JSON yang valid
if (json_decode($response) === null) {
    // Jika tidak valid, kembalikan error JSON yang aman untuk klien
    echo json_encode(["success" => false, "message" => "Server Apps Script mengembalikan data tidak valid."]);
    exit;
}

// Kembalikan respons JSON dari Apps Script ke klien
echo $response;
?>

Langkah 3: Kode HTML dan JavaScript (Frontend)

Kode ini adalah antarmuka yang dilihat pengguna. Letakkan kode ini di halaman website Anda.

PENTING: GANTI variabel SCRIPT_URL di JavaScript dengan URL file upload-proxy.php di hosting Anda.

Kode HTML dan JavaScript

<!DOCTYPE html>
<html>
<body>
    <h2>Upload ke Google Drive</h2>
    <input type="file" id="file" />
    <button id="upload">Upload</button>
    <p id="status"></p>

    <script>
        // <-- GANTI DENGAN URL FILE upload-proxy.php ANDA -->
        const SCRIPT_URL = "https://contohwebsite.com/upload-proxy.php"; 
        
        const uploadBtn = document.getElementById("upload");
        const fileInput = document.getElementById("file");
        const status = document.getElementById("status");

        uploadBtn.addEventListener("click", async () => {
            const file = fileInput.files[0];
            if (!file) {
                // Gunakan cara lain selain alert() untuk notifikasi
                status.textContent = "Pilih file dulu!";
                return;
            }

            status.textContent = "Mengunggah...";

            // 1. Membaca file dan mengonversinya ke Base64
            const reader = new FileReader();
            reader.onload = async () => {
                // Memisahkan header data URL (data:mime/type;base64,) dari konten Base64
                const base64Data = reader.result.split(",")[1];
                const data = {
                    filename: file.name,
                    mimeType: file.type,
                    content: base64Data
                };

                try {
                    // 2. Mengirim data ke PHP Proxy
                    const response = await fetch(SCRIPT_URL, {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(data),
                    });

                    const text = await response.text();
                    let result;
                    try {
                        result = JSON.parse(text); 
                    } catch {
                        throw new Error("Respon dari server tidak valid.");
                    }

                    // 3. Menampilkan hasil
                    if (result.success) {
                        status.innerHTML = `
                            <b>Berhasil upload:</b> ${result.name}<br>
                            <a href="${result.fileUrl}" target="_blank">Lihat di Google Drive</a>
                        `;
                    } else {
                        status.textContent = "Gagal upload: " + (result.message || "Tidak diketahui");
                    }

                } catch (err) {
                    status.textContent = "Error: " + err.message;
                }
            };
            reader.readAsDataURL(file); // Memulai pembacaan file
        });
    </script>
</body>
</html>

Cari Blog Ini

UBOIZ BLOG