Cara Membuat HTML sendiri untuk Upload File ke Google Drive

Pertama-tama kita tahu bahwa Mengupload file secara manual ke google drive bukanlah hal yang sulit, tetapi dalam kasus tertentu kita membutuhkan sebuah perintah atau sebuah halaman HTML, yang berfungsi untuk mengupload file secara otomatis ke dalam folder tertentu di google drive. Ini membutuhkan beberapa langkah yang lumayan panjang, tetapi hasilnya akan membuat pekerjaan kita lebih efisien.

Misalnya, kita ingin memberi kesempatan kepada pembaca di blog kita untuk mengupload sebuah file, dan file tersebut akan dikirim ke google drive, atau dalam hal tertentu kita ingin mengupload file tanpa tanpa harus membuka google drive.

Menyiapkan Folder di Google drive

Sekarang kita akan mulai dengan langkah-langkah sebagai berikut:

Buka Google Drive
Buat Sebuah Folder pada contoh kali ini saya beri nama folder "Latihan-1"
Di dalam folder "Latihan-1" kita buat 2 folder yaitu folder Skrip dan folder Album (Folder skrip nantinya akan kita tempatkan skrip untuk upload file sedangkan folder Album nantinya akan menampung file-file yang kita upload secara otomatis),

Membuat Skrip di Google App Script

Di dalam folder Skrip, Klik Kanan lalu pilih Lainnya lalu pilih Skrip Google Apps

Setelah Muncul Google Apps Script, hapus baris kode yang ada lalu ganti dengan kode di bawah ini:

const folderalbumID = 'ID_Folder_Album'; // ISI ID DARI FOLDER ALBUM

function doGet(e) {
		var html = HtmlService.createHtmlOutputFromFile('form');
		return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function uploadFiles(data) {
	var file = data.myFile;
	var folder = DriveApp.getFolderById(folderalbumID);
	var createFile = folder.createFile(file);
  return createFile.getDownloadUrl();
//	return createFile.getId();
}

Sekarang ganti ID_Folder_ALBUM dengan mengambil ID dari folder Album yang sudah kita buat
ID dari sebuah folder atau file di google drive dapat diambil dari linknya:
Setelah mengganti variabel ID_Folder_Album kita menambahkan sebuah file html di dalam Google Apps Script. Caranya, Klik tanda tambah di bagian file lalu klik HTML

beri nama file html tersebut dengan nama form

Pada file Form.html hapus skrip html yang ada lalu ganti dengan skrip di bawah ini

  <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <title>Upload Files</title>
  </head>
  <body style="text-align:center;display:block">
  <style>
  
  
  .dlbutton br {
    display: none !important;
    cursor:pointer;
}
.dlbutton {
    margin: 0 auto;
    width: 200px;
    position: relative;
    z-index: 1;
    cursor:pointer;
}
.dlbutton a:hover {
    background: #23abd3;
    color: #000 !important;
}
.dlbutton a {
    color: #fff !important;
    border-radius: 7px;
    display: block;
    width: 200px;
    height: 50px;
    background: #04AA6D;
    text-align: center;
    text-decoration: none;
    font: 17px/50px Helvetica, Verdana, sans-serif;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&amp;amp;#39;#00b7ea&amp;amp;#39;,endColorstr=&amp;amp;#39;#009ec3&amp;amp;#39;,GradientType=0);
}

.dlbutton a:active {
    background: #004d40;
    background: -moz-linear-gradient(top, #00695c 36%, #0e6578 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(36%, #00695c), color-stop(100%, #0e6578));
    background: -webkit-linear-gradient(top, #00695c 36%, #0e6578 100%);
    background: -o-linear-gradient(top, #00695c 36%, #0e6578 100%);
    background: -ms-linear-gradient(top, #00695c 36%, #0e6578 100%);
    background: linear-gradient(top, #4db6ac 36%, #0e6578 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&amp;amp;#39;#00695C&amp;amp;#39;,endColorstr=&amp;amp;#39;black&amp;amp;#39;,GradientType=0);
}



  input[type=button], input[type=submit]  {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
input[type=file]{
background-color: #121920;
    border: none;
    color: white;
    text-decoration: none;
    cursor: pointer;
    width: 80%;
    text-align: center;
    margin: 0;
    padding: 5px ;
 margin-top: 20px; border-radius:10px;
}
input[type=file] span{
color:black;
}
::file-selector-button {
  background-color: #aa3e04;
  border: none;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  cursor: pointer;
  margin-right:20px;
  border-radius:10px;
 
  
}
.tittle h1{margin:0; color:#fff}

#cek{display:block; border-radius:10px}
#resp{display:none;
background:#fff;
padding:5px 10px; border-radius:7px;
}
#id_file{font-weight:600}
#proses{display:none;color:#fff; text-align:center;}


.content-wrapper{display:block; max-width: 500px; margin: 10px auto; background:#176ab9; padding:20px;border-radius: 10px;}
  </style>
<div class = "content-wrapper">
<div class="footer-shape footer-fancy-logo">
<img alt="" src="LinkGambar/Logo">
</div>

<div class = "tittle">
    <h1>Upload Album</h1>
</div>
<div class ="Content">
    <form>
        <input id="albumfile" type="file" name="myFile" mulitple>
        <br>
        <br>
        <input type="button" id="submitBtn" value="Upload Files" style="display:none">
    </form>
    
    <center>
          <div id = "dlbutton" class='dlbutton'>
<a onclick="cekFile();" >UPLOAD</a><br/>
</div> 
     </center>
       <div id="proses">Mohon tunggu sebentar...</div>
       <label id="resp"><span id="fileresp"></span><span id="id_file"></span></label>
</div>
</div>
    <script>
      document.getElementById('submitBtn').addEventListener('click',
        function(e){
          google.script.run.withSuccessHandler(onSuccess).uploadFiles(this.parentNode)
        })
        
        function onSuccess(data){

          document.getElementById('fileresp').innerHTML = "File ID : ";
          document.getElementById('id_file').innerHTML = data;
          document.getElementById("resp").style.display = "block";
          document.getElementById("proses").style.display = "none";
          document.getElementById("dlbutton").style.display = "none";
          document.getElementById("albumfile").style.display = "none";
        }
    function cekFile(){
      yangMauDiupload = document.getElementById("albumfile").value;
      adaFile = "Ya";
      if(yangMauDiupload == null || yangMauDiupload == ""){
        alert("PILIH FILE TERLEBIH DAHULU");
        adaFile = "Tidak";
      }
       
      if( adaFile == "Tidak" ){
      }else{
        document.getElementById("dlbutton").style.display = "none";        
        document.getElementById("proses").style.display = "block";
        document.getElementById("submitBtn").click();
      }
    }
     
     
    </script>
  </body>
</html>

Sekarang ganti nama project sesuai dengan yang kamu inginkan, pada contoh kali ini saya beri nama projectnya "Upload File". Caranya klik pada tulisan Project tak Berjudul di bagian atas, lalu beri nama sesuai yang kamu inginkan
Klik Tombol Save untuk menyimpan projectnya

Publikasikan Hasil Projectnya

Sekarang Project kita sudah selesai, Kita tinggal mempublikasi projectnya

Klik Terapkan lalu klik Deployment Baru
Klik Tombol Gear di bagian Pilih Jenis lalu klik Aplikasi Web
Ubah pilihan agar seperti contoh gambar di atas, lalu klik terapkan
Akan muncul dialog Deployment Baru, Klik Izinkan Akses
Sekarang kamu akan diminta menyetujui akses, klik pada akun kamu yang tersedia, lalu klik Lanjutan, setelah itu KLik Buka UploadFile(TidakAman), terakhir klik Izinkan.

Izin Akses untuk mempublikasikan Aplikasi Web Google App Script

Salin URL Aplikasi Web yang diberikan, itulah link akan akan kita pakai untuk mengakses Aplikasi Upload yang kita buat

Sekarang, buka url tersebut di browser dan lihat hasilnya. Jika langkah yang kamu lakukan benar, maka tampilannya akan seperti gambar di bawah ini :

Cobalah untuk mengupload sebuah file, jika sukses, maka aplikasi akan mengembalikan link download untuk file yang diupload

Demikian pembahasan saya kali ini tentang membuat file HTML untuk upload File ke Google Drive

Cara Membuat HTML sendiri untuk Upload File ke Google Drive

Menyiapkan Folder di Google drive

Membuat Skrip di Google App Script

Publikasikan Hasil Projectnya

Posting Komentar