Skip to main content

Cara Upload File Ke Google Drive di Blogger (With Script Google)

Cara Upload File Ke Google Drive di Blogger (With Script Google)

www.azid45.web.id - Cara Upload File Ke Google Drive di Blogger (With Script Google). Assalamualaikum.wr.wb, pada kesempatan kali ini saya akan share cara upload file ke google drive. Biasanya bila kita upload file dari google drive, kita harus masuk ke laman drive.google.com

Apakah kita bisa upload file ke google drive tanpa login?, bahkan upload google drive langsung dari blog kita?.

Tentunya hal ini sangat tidak mungkin terjadi, pasalnya syarat yang harus dilakukan adalah login ke google terlebih dahulu. Hal tersebut juga saya alami saat ada pertanyaan demikian dari client saya, sebelum saya menemukan cara  yang akan menjadi pembahasan kali ini.

Baiklah, untuk upload file di google drive tanpa login ke akun google ternyata cukuplah mudah, bahkan kita bisa juga menaruhnya di blog kita. Kita hanya butuh membuatnya di layanan script.google.com dan membuat iframe diblog kita.

Lebih lanjut, silahkan simak tutorial berikut ini:

Pertama, login akun google.

Kedua, menuju ke script.google.com

Ketiga, klik "buat project baru" nanti akan diarahkan ke tab baru.

Keempat, copy kode berikut ini, dan pastekan ke dalam tab file code.gs (sebelum paste hapus code function myFunction .... terlebih dahulu)

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

function uploadFileToDrive(base64Data, fileName) {
  try{
    var splitBase = base64Data.split(','),
        type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName);

    var dropbox = "Eksperiment"; // Folder Name
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    var file = folder.createFile(ss);

    return file.getName();
  }catch(e){
    return 'Error: ' + e.toString();
  }
}

Keterangan:

Ganti nama "Eksperiment" dengan folder yang ada di google drive Anda. Bila belum membuat sebuah folder untuk tempat file saat diupload Anda bisa masuk google drive, dan pilih buat folder baru.

Untuk "form" adalah nama HTML yang akan kita buat.

Kelima, Tetap di script.google.com, buatlah file baru dengan nama form caranya klik menu file - pilih baru - klik file HTML. Jika sudah nanti akan muncul modal untuk mengisi nama file, buat aja dengan nama "form".

Cara Upload File Ke Google Drive di Blogger (With Script Google)


Keenam, pada tab form.html, pastekan kode dibawah ini:


<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <style>
body {
    max-width: 300px;
    width: 100%;
    padding: 20px;
    margin: auto;
    background: #fff;
    font-family: sans-serif;
    font-size: 14px;
}
#formcontainer {
    position: relative;
    display: block;
    margin: auto;
    text-align: center;
}
#myForm {
    position: relative;
    display: block;
    margin: 10px auto;
}
.select-file, .upload-file {
    display: table;
    width: 100%;
    margin: 10px 0;
    border-bottom: 1px solid #ddd;
    text-align: right;
}
.title-select-file, .title-upload-file {
    display: table-cell;
    font-size: 14px;
    font-weight: bold;
    width: 100px;
    vertical-align: top;
    line-height: normal;
}
.option-select-file, .input-upload-file {
    line-height: normal;
    padding-left: 10px;
    margin-bottom: 10px;
    display: table-cell;
    vertical-align: top;
    font-size: 14px;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0 0 15px 0;
    color: #555;
    font-size: 14px;
    width: 100%;
    border: 0;
    outline: none;
}
input#myFile {
    position: relative;
    display: block;
    padding: 0 0 15px 0;
    outline: none;
    border: none;
    text-align: left;
    width: 100%;
    max-width: 100px;
}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
    content: 'Pilih File';
    position: relative;
    display: inline-block;
    color: #fff;
    background: #003961;
    border: 1px solid #fff;
    border-radius: 3px;
    padding: 5px 8px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    box-shadow: 1px 1px #fff;
    font-weight: 700;
    font-size: 12px;
    margin: auto;
    text-align: center;
}
input[type="button"] {
    position: relative;
    display: block;
    width: 100%;
    padding: 5px 15px;
    background: #003961;
    color: #fff;
    margin: auto;
    text-align: center;
    border: none;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
}
#progressbar{
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: relative;
    vertical-align: middle;

}
.progress-label {
    float: left;
    margin-top: 5px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    width: 100%;
    height: 100%;
    position: relative;
    vertical-align: middle;
    display: block;
}

  </style>
  </head>
  <body>
  <div id="formcontainer">
  <form id="myForm">
  <div class="select-file">
  <div class="title-select-file">
  Type File :
  </div>
  <div class="option-select-file">
  <div class="option-select-file-wrap">
        <select name="attachType">
        <option value="defaule">Pilih Type File</option>
        <option value="Pictures Only">Image</option>
        <option value="Pictures & Proposals">Semua Type</option>
      </select>
  </div>
  </div>
  </div>
  <div class="upload-file">
  <div class="title-upload-file">
  Upload File : 
  </div>
  <div class="input-upload-file">
    <input type="file" name="filename" id="myFile" class="custom-file-input" multiple>
  </div>
  </div>
  <input type="button" value="Upload" onclick="iteratorFileUpload()">
  </form>
  </div>
  <div id="output"></div>
<div id="progressbar">
    <div class="progress-label"></div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
var numUploads = {};
numUploads.done = 0;
numUploads.total = 0;

// Upload the files into a folder in drive
// This is set to send them all to one folder (specificed in the .gs file)
function iteratorFileUpload() {
    var allFiles = document.getElementById('myFile').files;

    if (allFiles.length == 0) {
        alert('No file selected!');
    } else {
        //Show Progress Bar

        numUploads.total = allFiles.length;
        $('#progressbar').progressbar({
        value : false
        });//.append("<div class='caption'>37%</div>");
        $(".progress-label").html('Proses upload file');
        // Send each file at a time
        for (var i = 0; i < allFiles.length; i++) {
            console.log(i);
            sendFileToDrive(allFiles[i]);
        }
    }
}

function sendFileToDrive(file) {
    var reader = new FileReader();
    reader.onload = function (e) {
        var content = reader.result;
        console.log('Sending ' + file.name);
        var currFolder = 'Eksperiment';
        google.script.run.withSuccessHandler(updateProgressbar).uploadFileToDrive(content, file.name, currFolder);
    }
    reader.readAsDataURL(file);
}

function updateProgressbar( idUpdate ){
   console.log('Received: ' + idUpdate);
   numUploads.done++;
   var porc = Math.ceil((numUploads.done / numUploads.total)*100);
   $("#progressbar").progressbar({value: porc });
   $(".progress-label").text(numUploads.done +'/'+ numUploads.total + ' file berhasil terupload');
   if( numUploads.done == numUploads.total ){
      //uploadsFinished();
      numUploads.done = 0;
   };
}
</script>

  <script>
    function fileUploaded(status) {
      document.getElementById('myForm').style.display = 'none';
      document.getElementById('output').innerHTML = status;
    }

  </script>
</body>
</html>

Ketujuh, klik icon Save untuk menyimpan file, dan jangan lupa beri nama file.

Kedelapan, klik menu Publikasikan  kemudian pilih Terapkan sebagai aplikasi web. Jika sudah akan muncul modal popup. Untuk project version isi aja dengan nomor 1, execute the app as biarkan saja me (email@gmail.com), dan who has access to the app pilih anyone, even anonymous. Jika sudah klik deploy

Setelah itu akan ada popup Authorization Requered tujuannya untuk mengizinkan project kita membaca, membuat, dan menghapus file yang ada di google drive. Oleh karena itu kita klik aja Review Permission - Pilih akun google - klik lanjutan - klik tulisan ... tidak aman (yang ada dibawah sendiri) - klik izinkan

Terakhir, copy link dibagian current web app URL sebelum Anda klik OK. Karena link tersebut yang akan kita buat untuk upload file ke google drive 


Sampai disini, sebenarnya sudah selesai kita membuat web app upload file ke google driva. Jika kita ingin menampilkan web app tersebut ke blog kita, caranya jadikan sebagai iframe. berikut kodenya


<iframe src="link web app" width="200" height="200"></iframe>

Keterangan: ganti tulisan "link web app" dengan link yang barusan Anda buat.

Demikianlah cara Cara Upload File Ke Google Drive di Blogger (With Script Google). Semoga bermanfaat. Amin

Source Code: Stackoverflow.com

Comingsoon : Cara Membuat Lisensi Template Blogger dengan JSON di Google Sheet

PERHATIAN:Jika anda ingin bertanya atau bantuan bisa kontak kami
contact atau 089677337414 - Terima kasih.
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui
Buka Komentar
Tutup Komentar
Close Disqus
Close Translate