Hướng dẫn tạo trang Upload ảnh từ Drive Google và Google Apps Script

"Hướng dẫn tạo trang Upload ảnh từ Drive Google và Google Apps Script"

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)

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ẻ

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

Tạo Google Apps Script

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

Deploy

• 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

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>

• 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

• Google Drive
• Apps Script

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

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