Như mọi người đã biết thì cái nhu cầu upload file trong đời sống của chúng ta rất là nhiều. Vì vậy thì chúng ta cần 1 nơi cũng như là một website để upload cũng như lưu trữ file các file đó một cách thuận tiện hơn.


Và hôm nay thì mình xin giới thiệu đến các bạn một cái tool giúp chúng ta có thể tạo ra một cái công cụ upload file lên Google Drive ngay trên blogger của chúng ta lun nhé.

Bắt đầu làm thôi nha.

Tạo liên kết Google Script

  • Bước 1: Đăng nhập vào tài khoản google của bạn. Nếu bạn có thể nhập script goolge bằng cách nhấp vào liên kết: https://script.google.com.
  • Bước 2: Tạo một dự án mới bằng cách nhấp vào nút dự án mới nằm ở góc trên bên trái. Sau đó, trước tiên hãy thay đổi nó về chế độ xem cũ, bằng cách nhấp vào dòng chữ "Sử dụng trình chỉnh sửa cũ" nằm ở bên phải.
  • Bước 3: Xóa tập lệnh google mặc định trong tệp có tên Mã.gs sau đó thay thế bằng tập lệnh bên dưới: 
function doPost(e) {
  const folderId = "[ID folder]";  // Or Folder ID which is used for putting the file instead of "root", if you need.

  const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
  const file = DriveApp.getFolderById(folderId).createFile(blob);
  const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
  return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}
  • Bước 4: Nhấn vào biểu tượng Lưu (Ctrl+S), để lưu tập lệnh google và đừng quên đặt tên cho nó, ví dụ "Upload File Gdrive".
  • Bước 5: Nhấn vào menu Xuất bản và sau đó chọn Áp dụng dưới dạng ứng dụng web. Sẽ có một cửa sổ bật lên phương thức sẽ xuất hiện. Đối với Phiên bản dự án, chỉ cần điền vào số 1, Thực thi ứng dụng chọn tôi (email@gmail.com) và Ai có quyền truy cập vào ứng dụng hãy chọn bất kỳ ai, kể cả ẩn danh. Nếu bạn đã nhấp vào Triển khai.

Sau đó, sẽ có một cửa sổ bật lên Yêu cầu ủy quyền có mục đích cho phép dự án của chúng tôi đọc, tạo và xóa các tệp trên Google Drive. Đó là lý do tại sao chúng ta chỉ cần nhấp vào Xem lại quyền > Chọn tài khoản google > nhấn vào Tiếp tục > Nhấn vào viết ... không an toàn (chính là bên dưới) > nhấn vào Cho phép.

Cuối cùng, sao chép liên kết tập lệnh google trong URL ứng dụng web hiện tại bật lên của phương thức, sau đó nhấp vào OK. Chúng tôi sẽ tạo liên kết sau cho tệp phản hồi tới Google Drive, vì vậy hãy lưu liên kết trước.

Cài đặt mã tải lên tệp tin trên bolgger

  • Bước 1: Đăng nhập vào tài khoản blogger của bạn.
  • Bước 2: Vào menu trang, sau đó tạo một trang mới (trang mới). Ở trên cùng bên trái có một biểu tượng bút chì, chỉ cần nhấp vào nó và chọn nó bằng cách hiển thị HTML
  • Bước 3: Sao chép đoạn mã sau trong cột trang.
<style>
  ::-webkit-file-upload-button,#kirim-file-upload {
  background: #4f9854;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius:5px;
  outline: none;
  cursor: pointer;
  }
  #uploaded {
    margin: 20px 0;
    text-align: center;
  }
  #submit-file {
    cursor: pointer;
  }
</style>
<form id="form-upload">
  <div class="datainput">
      <input name="fullname" id="fullname" placeholder="Họ và tên" type="text">
  </div>
  <div class="datainput">
      <input name="filename" id="filename" placeholder="Tên file" type="text">
  </div>
  <div class="datainput">
    <input name="file" id="uploadfile" type="file">
    <input id="submit-file" type="submit" value="Upload File">
  </div>
  <div id='uploaded'></div>
</form>
<input id="kirim-file-upload" type="button" value="Bằng chứng chuyển khoản"/>
<script>
const form = document.getElementById('form-upload');
const upload = document.getElementById('uploaded');
form.addEventListener('submit', e => {
  e.preventDefault();
  const file = form.file.files[0];
  const fr = new FileReader();
  fr.readAsArrayBuffer(file);
  var progressUpload = "Quá trình tải tệp lên, vui lòng đợi...";
  upload.innerHTML = progressUpload;
fr.onload = f => {
  // I added below script.
  let newName = form.filename.value;
  const orgName = file.name;
  if (orgName.includes(".")) {
    const orgExt = orgName.split(".").pop();
    if (orgExt != newName.split(".").pop()) {
      newName = newName ? `${newName}.${orgExt}` : orgName;
    }
  }
  
  const url = "https://script.google.com/macros/s/.../exec";
  
  const qs = new URLSearchParams({filename: newName, mimeType: file.type});  // Modified
  fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
  .then(res => res.json())
  .then(e => upload.innerHTML = '<p class="center">Upload file thành công</p><a id="linkfile" href="'+e.fileUrl+'" target="_blank" rel="noopener nofollow">Xem file</a>')
  // <--- You can retrieve the returned value here.
  .catch(err => console.log(err));
}
});
  $('#kirim-file-upload').click(uploadedFile);
  function uploadedFile() { 
    var walink = 'https://web.whatsapp.com/send'; 
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
      var walink = 'whatsapp://send'; 
    } 
    var namaUploaded = '*Họ và tên* : ' + $("#fullname").val();
    var namaFile = '*Tên file* : ' + $("#filename").val();
    var linkFile = '*Link File* : ' + $("#linkfile").attr("href");
    console.log(linkFile)
    var nomorHP = getRandom(phonenumber);
    var teksPesan = "Xin chào Admin, tôi đã gửi được tập tin, đây là thông tin chi tiết:";
    var kirimFile = walink + '?phone=' + nomorHP + '&text=' + teksPesan + '%0A%0A' + namaUploaded + '%0A' + namaFile + '%0A' + linkFile;
    window.open(kirimFile,'_blank');
  }
</script>
Đối với phần script, nó sử dụng jQuery, vì vậy nếu mẫu của bạn không có jQuery, bạn có thể sử dụng script để thay thế nó bằng script bên dưới: 
document.getElementById('kirim-file-upload').addEventListener('click', e => {
    e.preventDefault()
    var walink = 'https://web.whatsapp.com/send'; 
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
      var walink = 'whatsapp://send'; 
    } 
    var namaUploaded = '*Họ và tên* : ' + document.getElementById('fullname').value;
    var namaFile = '*Tên file* : ' + document.getElementById('filename').value;
    var linkFile = '*Link file* : ' + document.getElementById('linkfile').getAttribute('href');
    console.log(linkFile)
    var nomorHP = getRandom(phonenumber);
    var teksPesan = "Xin chào Admin, tôi đã gửi được tập tin, đây là thông tin chi tiết:";
    var kirimFile = walink + '?phone=' + nomorHP + '&text=' + teksPesan + '%0A%0A' + namaUploaded + '%0A' + namaFile + '%0A' + linkFile;
    window.open(kirimFile,'_blank');
  });
  • Bước 4: Xuất bản.

Để link tệp Google Drive có thể truy cập trực tiếp và xem mà không cần đăng nhập, trước tiên bạn có thể đăng nhập vào tài khoản Google Drive của mình, sau đó vào thư mục lưu trữ mà chúng ta đã tạo, nhấp chuột phải và chọn chia sẻ. Thay thế từ bị hạn chế bằng bất kỳ ai có thể xem tệp.

Với các bước này, chúng tôi có thể tải lên các tệp trên blogger. Hãy nhớ rằng tệp tải lên tối đa là 50Mb, vì vậy nếu tệp được tải lên lớn hơn 50Mb thì bạn có thể tạo Rar được chia thành nhiều phần. Ngoài ra, hãy đảm bảo rằng ổ đĩa Google của bạn có đủ dung lượng lưu trữ, khi đầy thì tốt hơn hết bạn nên xóa các tệp không quan trọng, sau đó vào menu thùng rác để xóa tệp vĩnh viễn.

Trên đây là toàn bộ code và Cách tạo tool upload file lên Google Drive trên blogger. Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!