Upload File Ke Google Drive Dengan AppScript
1. Siapkan Google Spreadsheet
(Bisa Copy spreadsheet disini)
2. Klik menu "Ekstensi" - lalu pilih "AppScript"
3. Klik tanda "+", buatlah file Code.gs , Index.html , JavaScript.html
4. Copy dan pastekan script di bawah ke Code.gs
Masukkan Password Untuk Melihat Script (Password ada di dalam video)
/**
* Upload File Ke Google Drive Dengan AppScript
* By www.javabitpro.com
*/
var folderID = "root"; //Replace the "root"with folder ID to upload files to a specific folder
var sheetName = "Data"; //Replace the "Data" with your data sheet name
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* @Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function uploadFiles(formObject) {
try {
var folder = DriveApp.getFolderById(folderID);
var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
var fileUrl = "";
var fileName = "";
//Upload file if exists and update the file url
if (formObject.myFile.length > 0) {
var blob = formObject.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + formObject.first_name);
fileUrl = file.getUrl();
fileName = file.getName();
} else{
fileUrl = "Record saved without a file";
}
//Saving records to Google Sheet
sheet.appendRow([
formObject.first_name,
formObject.last_name,
formObject.gender,
formObject.dateOfBirth,
formObject.email,
formObject.phone,
fileName,
fileUrl,
Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);
// Return the URL of the saved file
return fileUrl;
} catch (error) {
return error.toString();
}
}
/**
* Upload File Ke Google Drive Dengan AppScript
* By www.javabitpro.com
*/
var folderID = "root"; //Replace the "root"with folder ID to upload files to a specific folder
var sheetName = "Data"; //Replace the "Data" with your data sheet name
function doGet() {
return HtmlService.createTemplateFromFile('Index').evaluate();
}
/* @Include JavaScript and CSS Files */
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function uploadFiles(formObject) {
try {
var folder = DriveApp.getFolderById(folderID);
var sheet = SpreadsheetApp.getActive().getSheetByName(sheetName);
var fileUrl = "";
var fileName = "";
//Upload file if exists and update the file url
if (formObject.myFile.length > 0) {
var blob = formObject.myFile;
var file = folder.createFile(blob);
file.setDescription("Uploaded by " + formObject.first_name);
fileUrl = file.getUrl();
fileName = file.getName();
} else{
fileUrl = "Record saved without a file";
}
//Saving records to Google Sheet
sheet.appendRow([
formObject.first_name,
formObject.last_name,
formObject.gender,
formObject.dateOfBirth,
formObject.email,
formObject.phone,
fileName,
fileUrl,
Utilities.formatDate(new Date(), "GMT+5:30", "yyyy-MM-dd'T'HH:mm:ss'Z'")]);
// Return the URL of the saved file
return fileUrl;
} catch (error) {
return error.toString();
}
}
5. Copy dan pastekan script di bawah ini Index.html
Masukkan Password Untuk Melihat Script (Password sama dengan di atas)
<html>
<head>
<base target="_top">
<style>
.register{
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
margin-top: 3%;
padding: 3%;
}
.register-left{
text-align: center;
color: #fff;
margin-top: 4%;
}
.register-left input{
border: none;
border-radius: 1.5rem;
padding: 2%;
width: 60%;
background: #f8f9fa;
font-weight: bold;
color: #383d41;
margin-top: 30%;
margin-bottom: 3%;
cursor: pointer;
}
.register-right{
background: #f8f9fa;
border-top-left-radius: 10% 50%;
border-bottom-left-radius: 10% 50%;
}
.register-left img{
margin-top: 15%;
margin-bottom: 5%;
width: 25%;
-webkit-animation: mover 2s infinite alternate;
animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
@keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
.register-left p{
font-weight: lighter;
padding: 12%;
margin-top: -9%;
}
.register .register-form{
padding: 10%;
margin-top: 10%;
}
.btnRegister{
float: right;
margin-top: 10%;
border: none;
border-radius: 1.5rem;
padding: 2%;
background: #0062cc;
color: #fff;
font-weight: 600;
width: 50%;
cursor: pointer;
}
.register .nav-tabs{
margin-top: 3%;
border: none;
background: #0062cc;
border-radius: 1.5rem;
width: 28%;
float: right;
}
.register .nav-tabs .nav-link{
padding: 2%;
height: 34px;
font-weight: 600;
color: #fff;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.register .nav-tabs .nav-link:hover{
border: none;
}
.register .nav-tabs .nav-link.active{
width: 100px;
color: #0062cc;
border: 2px solid #0062cc;
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.register-heading{
text-align: center;
margin-top: 8%;
margin-bottom: -15%;
color: #495057;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<?!= include('JavaScript'); ?>
</head>
<body>
<!------ FORM ---------->
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div class="container register">
<div class="row">
<div class="col-md-3 register-left">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVdU2MTCmyH-9i5wuAUzbVV6ruQyJst_jyrxMyGRyyjL_-hwBc8AwVeqRnenw6oTqsWGWLufA5NkwjTD-PMAMPp1PeCFJTWDgVynnlr7N48sqiSSUg3wbiGUMyCbLeWozzNSudsh8UdlxKtIPgS2IlvYKVfeOMsM7O_73Y9zsSElaJeKgkItED00N/s1600/unnamed.webp" alt=""/>
<h3>SELAMAT DATANG</h3>
<p>CONTOH PROJECT UPLOAD FILE TO GOOGLE DRIVE by : JAVABITPRO</p>
<p>Visit : www.javabitpro.com
<br>
Youtube : javabitpro
</p>
</div>
<div class="col-md-9 register-right">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">PROJECT INPUT FILE</h3>
<div class="row register-form">
<div class="col-md-6">
<!------ Nama Depan ---------->
<div class="form-group">
<div class="maxl">
<input type="text" class="form-control" name="first_name" placeholder="Nama Depan" required>
</div>
</div>
<!------ Gender/Jenis Kelamin ---------->
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<p>Jenis Kelamin</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">Laki-Laki</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">Perempuan</label>
</div>
</label>
</div>
<!------ Email ---------->
<div class="form-group">
<div class="maxl">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<!------ Nomer Telp ---------->
<div class="form-group">
<div class="maxl">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Nomer Telp" required>
</div>
</div>
</div>
</div>
<!------ Nama Belakang ---------->
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Nama Belakang" required>
</div>
<!------ Tanggal Lahir ---------->
<div class="form-group">
<label for="dateOfBirth"></i>Tanggal Lahir</label>
<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth" required>
</div>
<!------ Upload Foto ---------->
<div class="form-group">
<label for="FormControlFile">Foto</label>
<input name="myFile" class="form-control-file" type="file" id="FormControlFile" />
</div>
<br>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<br>
<div id="output"></div>
</div>
</body>
</html>
<!-- Script by www.javabitpro.com ------------------------------------------------ -->
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:374px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:546px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:1055px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:1052px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:60%}}</style><div class="disclaimer">@Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>
<html>
<head>
<base target="_top">
<style>
.register{
background: -webkit-linear-gradient(left, #3931af, #00c6ff);
margin-top: 3%;
padding: 3%;
}
.register-left{
text-align: center;
color: #fff;
margin-top: 4%;
}
.register-left input{
border: none;
border-radius: 1.5rem;
padding: 2%;
width: 60%;
background: #f8f9fa;
font-weight: bold;
color: #383d41;
margin-top: 30%;
margin-bottom: 3%;
cursor: pointer;
}
.register-right{
background: #f8f9fa;
border-top-left-radius: 10% 50%;
border-bottom-left-radius: 10% 50%;
}
.register-left img{
margin-top: 15%;
margin-bottom: 5%;
width: 25%;
-webkit-animation: mover 2s infinite alternate;
animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
@keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
.register-left p{
font-weight: lighter;
padding: 12%;
margin-top: -9%;
}
.register .register-form{
padding: 10%;
margin-top: 10%;
}
.btnRegister{
float: right;
margin-top: 10%;
border: none;
border-radius: 1.5rem;
padding: 2%;
background: #0062cc;
color: #fff;
font-weight: 600;
width: 50%;
cursor: pointer;
}
.register .nav-tabs{
margin-top: 3%;
border: none;
background: #0062cc;
border-radius: 1.5rem;
width: 28%;
float: right;
}
.register .nav-tabs .nav-link{
padding: 2%;
height: 34px;
font-weight: 600;
color: #fff;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.register .nav-tabs .nav-link:hover{
border: none;
}
.register .nav-tabs .nav-link.active{
width: 100px;
color: #0062cc;
border: 2px solid #0062cc;
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.register-heading{
text-align: center;
margin-top: 8%;
margin-bottom: -15%;
color: #495057;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<?!= include('JavaScript'); ?>
</head>
<body>
<!------ FORM ---------->
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div class="container register">
<div class="row">
<div class="col-md-3 register-left">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWVdU2MTCmyH-9i5wuAUzbVV6ruQyJst_jyrxMyGRyyjL_-hwBc8AwVeqRnenw6oTqsWGWLufA5NkwjTD-PMAMPp1PeCFJTWDgVynnlr7N48sqiSSUg3wbiGUMyCbLeWozzNSudsh8UdlxKtIPgS2IlvYKVfeOMsM7O_73Y9zsSElaJeKgkItED00N/s1600/unnamed.webp" alt=""/>
<h3>SELAMAT DATANG</h3>
<p>CONTOH PROJECT UPLOAD FILE TO GOOGLE DRIVE by : JAVABITPRO</p>
<p>Visit : www.javabitpro.com
<br>
Youtube : javabitpro
</p>
</div>
<div class="col-md-9 register-right">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">PROJECT INPUT FILE</h3>
<div class="row register-form">
<div class="col-md-6">
<!------ Nama Depan ---------->
<div class="form-group">
<div class="maxl">
<input type="text" class="form-control" name="first_name" placeholder="Nama Depan" required>
</div>
</div>
<!------ Gender/Jenis Kelamin ---------->
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<p>Jenis Kelamin</p>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="male" value="male">
<label class="form-check-label" for="male">Laki-Laki</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender" id="female" value="female">
<label class="form-check-label" for="female">Perempuan</label>
</div>
</label>
</div>
<!------ Email ---------->
<div class="form-group">
<div class="maxl">
<input type="email" class="form-control" id="email" name="email" placeholder="Email" required>
</div>
</div>
<!------ Nomer Telp ---------->
<div class="form-group">
<div class="maxl">
<input type="tel" class="form-control" id="phone" name="phone" placeholder="Nomer Telp" required>
</div>
</div>
</div>
</div>
<!------ Nama Belakang ---------->
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" id="last_name" name="last_name" placeholder="Nama Belakang" required>
</div>
<!------ Tanggal Lahir ---------->
<div class="form-group">
<label for="dateOfBirth"></i>Tanggal Lahir</label>
<input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth" required>
</div>
<!------ Upload Foto ---------->
<div class="form-group">
<label for="FormControlFile">Foto</label>
<input name="myFile" class="form-control-file" type="file" id="FormControlFile" />
</div>
<br>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</form>
<br>
<div id="output"></div>
</div>
</body>
</html>
<!-- Script by www.javabitpro.com ------------------------------------------------ -->
<style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:374px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:546px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:1055px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:1052px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:60%}}</style><div class="disclaimer">@Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>
6. Copy dan pastekan script di bawah ini ke JavaScript.html
Masukkan Password Untuk Melihat Script (Password sama dengan di atas)
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject){
google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
if(isValidURL(url)){
div.innerHTML = '<div class="alert alert-success" role="alert"><a href="' + url + '">File uploaded successfully!</a></div>';
document.getElementById("myForm").reset();
}else{
//Show warning message if file is not uploaded or provided
div.innerHTML = '<div class="alert alert-danger" role="alert">'+ url +'!</div>';
}
}
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = '<div class="alert alert-danger" role="alert">'+ error.message +'!</div>';
}
function isValidURL(string) {
var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
return (res !== null);
}
</script>
<script>
function preventFormSubmit() {
var forms = document.querySelectorAll('form');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject){
google.script.run.withSuccessHandler(updateUrl).withFailureHandler(onFailure).uploadFiles(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
if(isValidURL(url)){
div.innerHTML = '<div class="alert alert-success" role="alert"><a href="' + url + '">File uploaded successfully!</a></div>';
document.getElementById("myForm").reset();
}else{
//Show warning message if file is not uploaded or provided
div.innerHTML = '<div class="alert alert-danger" role="alert">'+ url +'!</div>';
}
}
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = '<div class="alert alert-danger" role="alert">'+ error.message +'!</div>';
}
function isValidURL(string) {
var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
return (res !== null);
}
</script>
7. Tekan ikon Save - lalu klik Terapkan/Deploy - pilih Deployment baru / New Deployment.
8. Pastikan jenisnya ada Aplikasi web dan hak akses adalah Siapa saja/Anyone -lalu Terapkan.
9. Terakhir Klik link sudah di Deploy.
10. SELESAI !
| Project | #JP21 Upload File Ke Google Drive Dengan AppScript | Form Profesional |
|---|---|
| Harga(IDR) | |
| Download |