Hướng dẫn chi tiết tạo trang upload file từ Google Drive và Google Apps Script

March 31, 2026

Hướng dẫn chi tiết tạo trang upload file từ Google Drive và Google Apps Script

Bài viết này mình sẽ hướng dẫn các bạn tạo công cụ upload ảnh dùng drive google chứa file

Tính năng

Upload ảnh trực tiếp từ website
Lưu ảnh lên Google Drive (miễn phí)
Trả về link ảnh dùng được ngay
Có preview + copy link
🔒 Chỉ cho phép upload từ website của bạn (chống spam)

Demo

Demo này hơi cao cấp và phức tạp hơn chút 😁

Cách thức hoạt động

Chọn ảnh
Website gửi ảnh → Google Apps Script
Script lưu ảnh vào Drive
Trả về link ảnh
Hiển thị preview + copy link

Triển khai

Lấy ID thư mục Drive và chia sẻ

Tạo 1 folder trong Google Drive. Link thư mục sẽ có dạng sau:

https://drive.google.com/drive/folders/XXXXXXXXXX

👉 ID chính là XXXXXXXXXX
Đừng quên chia sẻ theo cài đặt sau

Tạo Google Apps Script

Truy cập https://script.google.com
→ Tạo project mới
→ Dán code sau:

Lưu ý:

vncoding.com: Thay bằng domain của bạn
XXXXXXXXXX: Thay ID thư mục đã tạo ở bước trên

Deploy

👉 Nhấn Triển khai → Tùy chọn triển khai mới

Tùy chỉnh như sau

Chọn loại: Ứng dụng Web
Mô tả: Nhập "Upload ảnh" hoặc tùy ý bạn
Thực thi bằng: Tôi
Người có quyền truy cập: Bất cứ ai

Click Triển khai sau đó copy URL App Script để thực hiện bước tiếp theo

Tạo trang upload ảnh

<div class="upload-box">
  <div class="upload-area" onclick="document.getElementById('uploadInput').click()">
    <i class="fas fa-cloud-upload-alt"></i>
    <p>Chọn ảnh hoặc click để upload</p>
    <input type="file" id="uploadInput" accept="image/*" hidden>
  </div>

  <button onclick="startUpload()" class="upload-btn">Upload</button>

  <div id="result"></div>
  <img id="preview">

  <div id="toast">Đã copy link!</div>
</div>

<style>
.upload-box{
  max-width:500px;
  margin:20px auto;
  padding:20px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  text-align:center
}
.upload-area{
  border:2px dashed #ff6b6b;
  padding:30px;
  border-radius:10px;
  cursor:pointer;
  background:#fafafa;
  transition:.3s
}
.upload-area:hover{background:#fff0f0}
.upload-area i{font-size:40px;color:#ff6b6b;margin-bottom:10px}
.upload-btn{
  margin-top:15px;
  padding:10px 20px;
  border:none;
  background:#ff6b6b;
  color:#fff;
  border-radius:8px;
  cursor:pointer
}
#preview{
  display:none;
  max-width:100%;
  margin-top:15px;
  border-radius:10px
}
.copy-btn{
  margin-top:5px;
  padding:6px 12px;
  border:none;
  background:#4caf50;
  color:#fff;
  border-radius:6px;
  cursor:pointer
}
#toast{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#333;
  color:#fff;
  padding:10px 20px;
  border-radius:6px;
  opacity:0;
  transition:.3s
}
#toast.show{opacity:1}
</style>

<script>
const API = "URL_APPS_SCRIPT"; // thay link App Script của bạn
const ALLOWED_DOMAIN = "vncoding.com";

async function startUpload(){

  // 🔒 chặn phía client
  if(!location.hostname.includes(ALLOWED_DOMAIN)){
    alert("Chỉ được upload tại website chính thức!");
    return;
  }

  const file = document.getElementById("uploadInput").files[0];

  if(!file){
    alert("Chọn ảnh đi");
    return;
  }

  const reader = new FileReader();

  reader.onload = async function(){

    const base64 = reader.result.split(",")[1];

    const res = await fetch(API,{
      method:"POST",
      headers:{
        "Content-Type":"application/x-www-form-urlencoded"
      },
      body:new URLSearchParams({
        file:base64,
        type:file.type,
        name:file.name,
        referer:location.hostname
      })
    });

    const data = await res.json();

    if(data.status === "success"){

      const img = document.getElementById("preview");
      img.src = data.url;
      img.style.display = "block";

      document.getElementById("result").innerHTML = `
        <input value="${data.url}" id="imgLink" style="width:100%;padding:6px">
        <button class="copy-btn" onclick="copyLink()">Copy</button>
      `;

    }else{
      alert("Upload lỗi!");
    }

  };

  reader.readAsDataURL(file);
}

function copyLink(){
  const input = document.getElementById("imgLink");
  input.select();
  document.execCommand("copy");

  const toast = document.getElementById("toast");
  toast.classList.add("show");

  setTimeout(()=>{
    toast.classList.remove("show");
  },1500);
}
</script>

Lưu Ý:

URL_APPS_SCRIPT: Thay bằng URL Apps Script đã copy ở bước trên
vncoding.com: Thay domain của bạn

Tổng kết

Chỉ với

Google Drive
Apps Script

👉 Bạn đã có hệ thống upload ảnh riêng cho blog của mình
⚠️ Lưu ý quan trọng Vì link ảnh đang có định dạng như sau

https://drive.google.com/uc?export=view&id=FILE_ID

Không phải đuôi ảnh như webp, png, jpeg... nên muốn dán link ảnh trực tiếp vào comment hiển thị ảnh luôn thì bạn phải tùy biến thêm để sao cho ra định dạng bên dưới là được

<img src="https://drive.google.com/uc?export=view&id=...">

Ok, vậy là xong rồi, cứ làm đi và đừng quên để lại bình luận nếu bạn gặp khó khăn trong lúc thực hiện nha, Bye!

Search This Blog

Blogger Việt Nam