Hướng dẫn tạo trang Upload ảnh lấy link bằng Cloudinary cho blogspot

Trong nhiều trường hợp, chúng ta cần một nơi để upload ảnh và lấy link trực tiếp (hotlink) để sử dụng trong blog, diễn đàn, hay các công cụ khác. Trước đây nhiều anh em thường dùng Imgur, Google Drive hay Dropbox, nhưng các dịch vụ này ngày càng siết chặt, hạn chế hoặc không hỗ trợ hotlink nữa.

Một giải pháp hiện đại, nhanh và miễn phí chính là sử dụng Cloudinary. Đây là dịch vụ lưu trữ hình ảnh chuyên nghiệp, hỗ trợ cả API để chúng ta dễ dàng upload ảnh trực tiếp từ trình duyệt và lấy link ngay lập tức.

Hướng dẫn tạo trang Upload ảnh lấy link bằng Cloudinary cho blogspot.

1. Chuẩn bị tài khoản Cloudinary

1. Truy cập Cloudinary và tạo tài khoản miễn phí.
2. Sau khi đăng ký xong, vào Dashboard, lấy thông tin Cloud name.
3. Vào mục Settings → Upload → Upload presets, tạo một unsigned upload preset. (ví dụ: đặt tên là unsigned).
4. Ở mục Signing Mode, chọn Unsigned.
5. Ấn Save.

⚡

Lưu ý: Unsigned upload nghĩa là bất kỳ ai có cloud name + preset name đều up được ảnh. Nếu để public trên blog thì ảnh nào up cũng sẽ lưu vào Cloudinary của bạn.

Dashboard trên Cloudinary

2. Tạo trang upload ảnh

Bạn chỉ cần chèn đoạn code dưới đây vào một trang HTML.

(ví dụ trên Blogger thì tạo Page mới, chuyển sang HTML mode và dán vào):

<div class="uploader">
  <h2>Upload Ảnh Lấy Link (Cloudinary)</h2>
  <div class="dropzone" id="dropzone">
    <p>Kéo ảnh vào đây hoặc nhấn để chọn</p>
    <input type="file" id="fileInput" accept="image/*">
  </div>
  <div id="status"></div>
</div>
<style>
.uploader {
  max-width: 600px;
  margin: 30px auto;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: center;
  font-family: Arial, sans-serif;
}
.uploader h2 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #333;
}
.dropzone {
  border: 2px dashed #bbb;
  border-radius: 10px;
  padding: 30px;
  background: #fafafa;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}
.dropzone:hover {
  border-color: #3f51b5;
  background: #f0f4ff;
}
.dropzone p {
  margin: 0;
  color: #666;
}
.dropzone input[type=file] {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
#status {
  margin-top: 20px;
}
#status input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 10px;
}
#status img {
  max-width: 100%;
  margin-top: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.copy-btn {
  background: #3f51b5;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 6px;
  transition: 0.3s;
}
.copy-btn:hover {
  background: #303f9f;
}
</style>
<script>
const CLOUD_NAME = "thay_cloudname_của_bạn"; 
const UPLOAD_PRESET = "unsigned"; // preset Cloudinary của bạn
const fileInput = document.getElementById("fileInput");
const dropzone = document.getElementById("dropzone");
const statusDiv = document.getElementById("status");
fileInput.addEventListener("change", handleFiles);
dropzone.addEventListener("dragover", e => {
  e.preventDefault();
  dropzone.style.borderColor = "#3f51b5";
});
dropzone.addEventListener("dragleave", e => {
  dropzone.style.borderColor = "#bbb";
});
dropzone.addEventListener("drop", e => {
  e.preventDefault();
  dropzone.style.borderColor = "#bbb";
  handleFiles({target: {files: e.dataTransfer.files}});
});
async function handleFiles(e) {
  const file = e.target.files[0];
  if (!file) return;
  const formData = new FormData();
  formData.append("file", file);
  formData.append("upload_preset", UPLOAD_PRESET);
  statusDiv.innerHTML = "⏳ Đang upload...";
  try {
    const res = await fetch(`https://api.cloudinary.com/v1_1/${CLOUD_NAME}/image/upload`, {
      method: "POST",
      body: formData
    });
    const data = await res.json();
    if (data.secure_url) {
      statusDiv.innerHTML = `
        ✅ Upload thành công!<br>
        <input id="linkInput" value="${data.secure_url}" readonly>
        <button class="copy-btn" onclick="copyLink()">Copy Link</button>
        <br><img src="${data.secure_url}">
      `;
    } else {
      statusDiv.innerHTML = "❌ Lỗi: " + JSON.stringify(data);
    }
  } catch (err) {
    statusDiv.innerHTML = "❌ Lỗi kết nối: " + err.message;
  }
}
function copyLink() {
  const linkInput = document.getElementById("linkInput");
  linkInput.select();
  document.execCommand("copy");
  alert("📋 Link đã được copy!");
}
</script>

Chú ý: Thay tên Cloud name const CLOUD_NAME = "thay_cloudname_của_bạn"; thành tên Cloud name của bạn ở Bước 1.

Xuất bản Trang của bạn và sử dụng.

3. Cách sử dụng

• Mở trang upload ảnh vừa tạo.
• Kéo/thả ảnh hoặc bấm chọn từ máy tính.
• Đợi vài giây để upload lên Cloudinary.
• Nhận link ảnh trực tiếp (https://res.cloudinary.com/...) → bấm Copy Link để sao chép.

4. Ưu điểm

• Nhanh và miễn phí: Gói free Cloudinary cho phép 25.000 hình / tháng, quá thoải mái cho nhu cầu cá nhân.
• Không cần server: Upload trực tiếp từ trình duyệt, không cần backend.
• Link ảnh chuẩn HTTPS: Dùng được trên mọi nền tảng.
• Có thể mở rộng: Cloudinary hỗ trợ resize, nén ảnh, tối ưu chất lượng ngay từ URL.

👉 Vậy là bạn đã có một công cụ “Upload ảnh lấy link” gọn gàng, thay thế cho Imgur. Nếu có vướn mắt ở bước nào thì cứ để lại bình luận, mình sẽ giúp các bạn!

Ở bài sau mình sẽ cho ra thêm phiên bản hỗ trợ upload nhiều ảnh cùng lúc (multi upload, trả về nhiều link) để chia sẻ cho các bạn. Nhớ đón xem nhé!