Tạo Form nhập liệu, đính kèm file lên Drive Google
Trong bài viết này, giaoan.link chia sẻ đến các bạn cách Tạo Form nhập liệu, đính kèm file lên Drive Google.
Ở đây, chúng ta sẽ ứng dụng Google sheet kết hợp với apps script, html để tạo 1 giao diện form nhập liệu và đính kèm file. Một số điểm chính của project này:
- Giao diện: Form, html, app web thân thiện
- Đính kèm: tất cả loại files (.doc, .xls, .ppt, .pdf, .Rar…)
- Quản lý tệp đính kèm: trong thư mục trên Google Drive
- Quản lý nội dung: Trên dịch vụ Google Sheet
- Dễ dàng nhúng Form vào: Blog, web. (–>Hướng dẫn nhúng Form vào trang Blog và Web)
Các bạn xem thêm nhiều bài học excel ứng dụng khác:
- GOOGLE SHEET WEBAPP TRA CỨU 34 TỈNH THÀNH VIỆT NAM MỚI NHẤT (SÁP NHẬP 2025)
- Quản Lý Tài Chính Cá Nhân Hiệu Quả Với Web App Google Apps Script
- Google sheet, apps script, webapp “Bé Vui Phép Nhân” – Công Cụ Luyện Toán Trực Quan Cho Học Sinh Tiểu Học
- Google sheet webapp Bé Vui Học Toán – Ứng dụng Luyện Phép Chia Trực Quan Cho Học Sinh Lớp 3
- Googlesheet appscript – Hệ Thống Đăng Ký Hồ Sơ Trực Tuyến (Online Registration Portal)
- [Share Code] Biến Google Sheet thành Web App Tra Cứu Dự Án & Tài Liệu (Miễn Phí Hosting)
- Hệ Thống Quản Lý Phòng Game “Cloud-Native” với Google Apps Script
- Hệ Thống Điều Phối & Quản Lý Đội Xe Thông Minh (Web App)
- Biến Google Sheets thành Dashboard “Viễn Tưởng” phong cách Cyberpunk
- Google appscript | Hệ thống tìm thông tin và nhập liệu 2 Form-Tự động truy vấn và upload nhiều files
Code trong file “Code.gs”
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('Upload');
htmlOutput.message = '';
return htmlOutput.evaluate();
}
function doPost(e) {
Logger.log(JSON.stringify(e));
var destination_id = '1aRaSAbli23w8Kt95B5LzfLZM-kJsUBq5'; // ID OF GOOGLE DRIVE DIRECTORY;
var destination = DriveApp.getFolderById(destination_id);
var data = Utilities.base64Decode(e.parameter.fileData);
var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
destination.createFile(blob);
listRecord(e.parameter.username, e.parameter.company, e.parameter.branch, e.parameter.fileName);
var htmlOutput = HtmlService.createTemplateFromFile('Upload');
htmlOutput.message = 'Bạn đã gửi mẫu thành công!';
return htmlOutput.evaluate();
}
function listRecord(username,company,branch,filename){
var url = 'https://docs.google.com/spreadsheets/d/1pHFrWp1Rhem1hf2z9VhZwhJnTwGDXRmTuPeldaLSW-E/edit#gid=0'; //URL OF GOOGLE SHEET;
var ss= SpreadsheetApp.openByUrl(url);
var recordsSheet = ss.getSheetByName("DataFile");
recordsSheet.appendRow([username, company, branch, filename, new Date()]);
}
function getUrl() {
var url = ScriptApp.getService().getUrl();
return url;
}Code cho trang “Upload.html”
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script>
function LoadFile(event)
{
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
console.log(e.target.result);
var fileData = e.target.result.substr(e.target.result.indexOf(",")+1);
var mimeTypeStart = e.target.result.indexOf("data:") + 5;
var mimeTypeEnd = e.target.result.indexOf(";");
var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
var fileName = file.name;
document.getElementById("fileData").value = fileData;
document.getElementById("mimeType").value = mimeType;
document.getElementById("fileName").value = fileName;
};
reader.readAsDataURL(file);
}
</script>
</head>
<body class="bg-light">
<div class="container">
<div style="text-align:center; font-size: 30px; font-weight: bold; color: red"> APPS SCRIPT GOOGLE SHEET FORM, UPLOAD FILE </div>
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<div class="form-group">
<label for="recipient-name" style="color:blue; font-weight: bold" class="col-form-label">HỌ VÀ TÊN:</label>
<input type="text" name="username" class="form-control" placeholder="Điền họ và tên" required>
</div>
<div class="form-group">
<label for="recipient-name" style="color:blue; font-weight: bold" class="col-form-label"> CÔNG TY: </label>
<select type="text" name="company" class="form-control"required >
<option value="">-Chọn công ty-</option>
<option value="Công ty A">Công ty A</option>
<option value="Công ty B">Công ty B</option>
<option value="Công ty C">Công ty C</option>
</select>
</div>
<div class="form-group">
<label for="recipient-name" style="color:blue; font-weight: bold" class="col-form-label"> CHI NHÁNH: </label>
<select type="text" name="branch" class="form-control"required >
<option value="">-Chọn Chi nhánh-</option>
<option value="Chi nhánh A">Chi nhánh A</option>
<option value="Chi nhánh B">Chi nhánh B</option>
<option value="Chi nhánh C">Chi nhánh C</option>
</select>
</div>
<div class="form-group">
<label style="font-weight:bold; color:red"> ĐÍNH KÈM FILE: </label>
<input type="file" name="file" onchange="LoadFile(event)"required >
<input type="hidden" id="fileData" name="fileData">
<input type="hidden" id="mimeType" name="mimeType">
<input type="hidden" id="fileName" name="fileName">
</div>
<div class="form-group">
<button type="submit" style="font-weight:bold" class="btn btn-primary btn-block"> GỬI ĐI </button>
<span><?= message ?></span>
</div>
</form>
</div>
</body>
</html>