Tạo Form nhập liệu, đính kèm file lên Drive Google

02/02/2023 giaoanppt

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:

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>

Video hướng dẫn thực hiện:

Tải toàn bộ code dạng Rar

TẢI CODE NÀY VỀ