haydo xin chào tất cả mọi người nhé , 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.
Cách tạo tool upload file lên Google Drive trên blogger |
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 = "1jf3kUTMXRFMgFLQw4rMJ6b4b7dnWiw4E"; // 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);
}
*Chú ý:- Thay thế mã "1-dxpjDjqgr0ul7wKT-FmwI_zz98JLb8a" bằng ID folders Drive của bạn.- Đăng nhập tài khoản google drive của bạn vào, tạo thư mục mới và bấm vào thư mục đó, trên thanh địa chỉ sẽ có một đường dẫn liên kết như thế này "https://drive.google.com/drive/folders/1-dxpjDjqgr0ul7wKT-FmwI_zz98JLb8a"chỉ cần sao chép nó vào phần mà tôi đã tô đậm, sau đó dán nó vào tập lệnh ở trên.
Cài đặt mã tải lên tệp tin trên bolgger
<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/AKfycbyYdPtfZRENgakcPE6Dm2JFs_UL8Xhf_6fQyoIhE4-irSouVMff/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');
});
*Chú ý:- Thay thế liên kết: https://script.google.com/macros/s/AKfycbyYdPtfZRENgakcPE6Dm2JFs_UL8Xhf_6fQyoIhE4-irSouVMff/exec, bằng liên kết google script mà bạn đã tạo ở bước đầu tiên.- Thay đổi mã "#4f9854" nếu bạn muốn thay đổi nền xanh.- Thay đổi nó cũng viết "Xin chào Admin, ... theo ý bạn"