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!

Theo VNCoding.Com https://www.vncoding.com/2026/03/huong-dan-tao-trang-upload-anh-tu-drive.html