Site icon Tài liệu miễn phí cho Giáo viên, học sinh.

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

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:

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


Exit mobile version