Skip to content

Instantly share code, notes, and snippets.

@GSimas

GSimas/code.gs

Created August 1, 2019 14:04
Show Gist options
  • Save GSimas/3fc9ceee3fef76d4c77ec2057e55635e to your computer and use it in GitHub Desktop.
Save GSimas/3fc9ceee3fef76d4c77ec2057e55635e to your computer and use it in GitHub Desktop.
Download ZIP
Google Script/Spreadsheet Form
Raw
code.gs
/*
RECEBER ARQUIVOS GOOGLE DRIVE / SPREADSHEETS / FORMULARIO
- - - - - - - - - - - - - - -
Gustavo Simas da Silva
Email: gustavosimassilva@gmail.com
*/
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('forms.html').setTitle("Formulário");
}
function uploadFileToGoogleDrive(data, file, name, email, number) {
try {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Pagina1');
var dropbox = "Arquivos Recebidos Formulario";
var folder, folders = DriveApp.getFoldersByName(dropbox);
var now = new Date();
if (folders.hasNext()) {
folder = folders.next();
} else {
folder = DriveApp.createFolder(dropbox);
}
/* Credit: www.labnol.org/awesome */
var contentType = data.substring(5,data.indexOf(';')),
bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
blob = Utilities.newBlob(bytes, contentType, file),
file = folder.createFolder([name, email].join(" ")).createFile(blob);
sheet.appendRow([now,name,email,number]);
return "OK";
} catch (f) {
return f.toString();
}
}
function sendText(name, email, number){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName('Pagina1');
sheet.appendRow([name,email, number]);
}
Raw
forms.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formulário</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.disclaimer{width: 780px; color:#646464;margin:10px auto;padding:0 26px;text-align:center;font:400 18px Roboto,Helvetica,Arial,sans-serif}.disclaimer a{color:#009688}#credit{display:none}
</style>
<style type="text/css">
p {
font-size: 14px;
}
.loader {
border: 4px solid #f3f3f3; /* Light grey */
border-top: 4px solid #3498db; /* Blue */
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Style buttons */
.buttonload {
background-color: #4CAF50; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 16px; /* Some padding */
font-size: 16px /* Set a font size */
}
.form-style-6{
font: 95% Arial, Helvetica, sans-serif;
max-width: 700px;
margin: 10px auto;
padding: 16px;
background: #F7F7F7;
}
.form-style-6 h1{
background: #43D1AF;
padding: 20px 0;
font-size: 140%;
font-weight: 300;
text-align: center;
color: #fff;
margin: -16px -16px 16px -16px;
}
.form-style-6 input[type="text"],
.form-style-6 input[type="date"],
.form-style-6 input[type="datetime"],
.form-style-6 input[type="email"],
.form-style-6 input[type="number"],
.form-style-6 input[type="search"],
.form-style-6 input[type="time"],
.form-style-6 input[type="url"],
.form-style-6 textarea,
.form-style-6 select
{
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
background: #fff;
margin-bottom: 4%;
border: 1px solid #ccc;
padding: 3%;
color: #555;
font: 95% Arial, Helvetica, sans-serif;
}
.form-style-6 input[type="text"]:focus,
.form-style-6 input[type="date"]:focus,
.form-style-6 input[type="datetime"]:focus,
.form-style-6 input[type="email"]:focus,
.form-style-6 input[type="number"]:focus,
.form-style-6 input[type="search"]:focus,
.form-style-6 input[type="time"]:focus,
.form-style-6 input[type="url"]:focus,
.form-style-6 textarea:focus,
.form-style-6 select:focus
{
box-shadow: 0 0 5px #43D1AF;
padding: 3%;
border: 1px solid #43D1AF;
}
.form-style-6 input[type="submit"],
.form-style-6 input[type="button"]{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 3%;
background: #43D1AF;
border-bottom: 2px solid #30C29E;
border-top-style: none;
border-right-style: none;
border-left-style: none;
color: #fff;
}
.form-style-6 input[type="submit"]:hover,
.form-style-6 input[type="button"]:hover{
background: #2EBC99;
}
</style>
</head>
<body>
<!-- -->
<div class="form-style-6">
<form name="myForm" id="form" novalidate="novalidate" style="max-width: 480px;margin: 40px auto;">
<div id="forminner">
<div class="row">
<div class="col s12">
<h5 class="center-align teal-text">Formulário</h5>
<p class="center-align teal-text">Preencha o formulário a seguir com suas informações</p>
</div>
</div>
<div class="row">
<label for="name"><font size="3px">Nome</font></label>
<input id="name" type="text" name="Name" class="validate" aria-required="true" required>
</div>
<div class="row">
<label for="email"><font size="3px">Email</font></label>
<input id="email" type="email" name="Email" class="validate" aria-required="true" required>
</div>
<div class="row">
<label for="number"><font size="3px">Telefone</font></label>
<input id="number" type="text" name="Number" class="validate" aria-required="true" required>
</div>
<div class="row">
<p class="center-align teal-text">Anexe seus documentos</p>
<div class="file-field input-field col s12">
<div class="btn">
<span>Arquivos</span>
<input id="files" type="file" onchange="uploadFile()" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Selecione um arquivo no seu computador">
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<button class="waves-effect waves-light btn submit-btn" type="submit" onchange="uploadFile()" onclick="submitForm(); return false;">Enviar <i class="fa fa-circle-o-notch fa-spin" style="font-size: 14px;"></i></button>
</div>
</div>
<div class="row">
<div class="input-field col s12" id = "progress">
</div>
</div>
</div>
<div id="success" style="display:none">
<h5 class="left-align teal-text">Arquivo enviado!</h5>
<p>Seu arquivo foi enviado com sucesso!</p>
<p>Suas informações foram enviadas e serão analisadas em breve. Retornaremos contato assim que o processo estiver concluído.</p>
<div class="btn">
<span><a href="http://www.google.com.br"><font color="white">Retornar ao site</font></a></span>
</div>
</div>
</form>
</div>
<!--
<div class="fixed-action-btn horizontal" style="bottom: 45px; right: 24px;">
<a class="btn-floating btn-large green">
<i class="large material-icons">menu</i>
</a>
<ul>
<li><a class="btn-floating red" href="https://gum.co/GA14" target="_blank" title="Buy License - File Upload Form"><i class="material-icons">monetization_on</i></a></li>
<li><a class="btn-floating blue" href="https://youtu.be/C_YBBupebvE" target="_blank" title="Video Tutorial"><i class="material-icons">video_library</i></a></li>
<li><a class="btn-floating green" href="http://www.labnol.org/internet/file-upload-google-forms/29170/" target="_blank" title="How to Create File Upload Forms"><i class="material-icons">help</i></a></li>
</ul>
</div>
-->
<br><br><br><br>
<p style="font-size:15px" class="center-align teal-text">Formulário desenvolvido por: <a href="http://simas.ml" target="_blank">Simas</a></p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="https://gumroad.com/js/gumroad.js"></script>
<script>
jQuery(".fa").hide();
jQuery(".fa-circle-o-notch").hide();
jQuery(".fa-spin").hide();
var file,
reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.error != null) {
showError("Arquivo " + file.name + " não foi possível ler.");
return;
} else {
google.script.run
.withSuccessHandler(showSuccess)
.uploadFileToGoogleDrive(e.target.result, file.name, $('input#name').val(), $('input#email').val(), $('input#number').val());
}
};
function showSuccess(e) {
if (e === "OK") {
$('#forminner').hide();
$('#success').show();
} else {
showError(e);
}
}
function submitForm() {
var files = $('#files')[0].files;
if (files.length === 0) {
showError("Por favor selecione um arquivo para enviar");
return;
}
if( document.myForm.Name.value == "" ) {
showError( "Por favor insira seu nome" );
document.myForm.Name.focus() ;
return;
}
var emailID = document.myForm.Email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if (atpos < 1 || ( dotpos - atpos < 2 )) {
showError("Por favor insira um email válido")
document.myForm.Email.focus() ;
return false;
}
if( document.myForm.Number.value == "" || isNaN( document.myForm.Number.value ) ||
document.myForm.Number.value.length < 8 ) {
showError( "Por favor insira um número de telefone válido" );
document.myForm.Number.focus() ;
return false;
}
file = files[0];
if (file.size > 1024 * 1024 * 10) {
showError("O tamanho do arquivo deve ser < 10 MB. Por favor tente novamente");
return;
}
showMessage("Enviando arquivo... Por favor aguarde a tela de confirmação.");
jQuery(".fa").show();
jQuery(".fa-circle-o-notch").show();
jQuery(".fa-spin").show();
reader.readAsDataURL(file);
}
function showError(e) {
$('#progress').addClass('red-text').html(e);
}
function showMessage(e) {
$('#progress').removeClass('red-text').html(e);
}
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php"); // http://www.developphp.com/video/JavaScript/File-Upload-Progress-Bar-Meter-Tutorial-Ajax-PHP
//use file_upload_parser.php from above url
ajax.send(formdata);
}
function progressHandler(event) {
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% carregado... por favor aguarde";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0; //wil clear progress bar after successful upload
}
function errorHandler(event) {
_("status").innerHTML = "Falha no carregamento";
}
function abortHandler(event) {
_("status").innerHTML = "Carregamento abortado";
}
</script>
</body>
</html>
Raw
utils.gs
function render(file, argsObject){
var tmp = HtmlService.createTemplateFromFile(file);
if(argsObject){
var keys = Object.keys(argsObject);
keys.forEach(function(key){
tmp[key] = argsObject[key];
});
}
return tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment