#JP21 Upload File Ke Google Drive Dengan AppScript | Form Profesional

byJavabitpro

Upload File Ke Google Drive Dengan AppScript


*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

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();
  }
}



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>



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>



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 !









Tags:
Previous Post Next Post

Promo