Multiple Upload File Google Drive Tanpa Login di Blogger

www.azid45.web.id - Multiple Upload File in Google Drive Without Login Google. Kira-kira itulah judul yang menarik untuk dibahas, sebab saya cek diberabagai sumber pencarian google hampir 100% tidak ada artikel bahasa Indonesia yang membahas tentang ini. Bahkan forum luar negeri juga demikian.

Memang benar, bila kita cari di google konten tentang upload file di google drive kebanyakan menampilkan akun google drive. Disisi lain upload file di google drive tanpa masuk akun google drive kebanyakan menggunakan Google Drive API dan itupun menggunakan PHP

Saya sendiri mencari tutorial upload beberapa file sekaligus ke google drive menggunakan script google hampir tidak ada. Akhirnya saya menemukan sebuah cara baru dari situs Tainake. Dimana salah satu agar kita berhasil mengupload file kita ke google drive menggunakan javascript yaitu menggunakan foreach dan append in javascript

Dari sini yang saya harapkan sudah mencapai 90%, tinggal bagaimana agar saya bisa upload beberapa file sekaligus di blog saya berhasil tanpa login google dan bahkan tanpa membuat form di script googlenya.

Mungkin yang baca ini bertanya-tanya sudah pernah membuat tutorial yang sama?. Sebelumnya memang saya sudah membuat tutorial upload file google drive menggunakan script google, akan tetapi belum sepenuhnya sempurna. Contohnya saja Tutorial upload file dengan script google. Tutorial ini memang sudah bisa upload banyak file sekaligus, akan tetapi form upload dari script google sehingga harus menggunakan iframe agar bisa digunakan di blogger

Contoh lain, Layanan upload file di blogger menggunakan google drive. Tutorial ini memang sudah sesuai dengan kebutuhan dan keinginan saya. Dimana form HTML langsung dari blogger, sehingga bisa di custom bahkan di modifikasi sesuai kebutuhan, akan tetapi belum bisa digunakan untuk upload file lebih dari satu.

Oleh karena hal inilah, akhirnya saya membuat tutorial yang sama dengan pengembangan fitur dan fungsi yang berbeda. Barangkali Anda ingin membuat form upload banyak file sekaligus bisa mengikuti tutorialnya berikut ini:

Pertama: Anda harus membuat script google terlebih dahulu. Untuk tutorialnya bisa lihat di tutorial saya sebelumnya tentang Layanan upload file di blogger.

Kedua: Dari tutorial tersebut kita hanya butuh link dari script googlenya saja, kurang lebih seperti ini "https://script.google.com/macros/s/AKfycbyAEjKUpgPu-OC88CD45FHdt4fTAsQLlndj0oqeu9KM53rzsHTd/exec". Jika sudah mendapatkan, bisa copy kode dibawah ini:

<style>
  ::-webkit-file-upload-button,#kirim-file-upload {
  background: #4f9854;
  color: #fff;
  padding: 5px 10px;
  border: none;
  border-radius:5px;
  outline: none;
  cursor: pointer;
  }
  #uploaded {
    margin: 20px 0;
    text-align: center;
  }
  #submit-file {
    cursor: pointer;
  }
  #link-file{
    display:none;
  }
</style>
<form id="form-upload">
  <div class="datainput">
    <input id="uploadfile" name="file" type="file" multiple=''/>
    <input id="submit-file" type="submit" value="Upload File" />
  </div>
  <div id="uploaded"></div>
  <div id="uploaded-file"></div>
  <div id="link-file">
  </div>
</form>
<script>
const form = document.getElementById('form-upload');
const upload = document.getElementById('uploaded');
const makan = document.getElementById('makan');
form.addEventListener('submit', e => {
  e.preventDefault();
  const file = form.file.files;
[...file].forEach((file, i) => {
  const fr = new FileReader();
  fr.readAsArrayBuffer(file);
  var progressUpload = "Proses upload file, silahkan ditunggu";
  upload.innerHTML = progressUpload;
fr.onload = f => {
  
  const url = "https://script.google.com/macros/s/AKfycbyAEjKUpgPu-OC88CD45FHdt4fTAsQLlndj0oqeu9KM53rzsHTd/exec";
  
  const qs = new URLSearchParams({filename: file.name, mimeType: file.type});  // Modified
  fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
  .then(res => res.json())
  .then(e => {
    $("#uploaded-file").append('<span>'+e.filename+' berhasil diupload</span><br/>');
    $("#uploaded").hide();
    $("#link-file").append(e.filename+' : '+e.fileUrl+',');
  }
       ) 
  .catch(err => console.log(err));
}
});
});
</script>

Untul link pada const url Anda bisa menggantinya dengan link script google yang sudah ada buat pada tahapan pertama. Jika sudah, buat saja halaman baru dan taruh kode tersebut didalamnya dalam mode HTML bukan compose.

KETERANGAN:

1. Bila Anda ingin menaruh scriptnya di menu tema - edit HTML, maka tambahkan kode <script> dengan //<![CDATA[, dan diatas kode </script> dengan //]]>
2. Bila Anda ingin mengambil data url file langsung dan dikirim ke WA, Anda cukup buat tombol kirim dan mengambil kode dari #link-file. Sebab nama file dan hasil link url file sudah saya ambil dan taruh pada kode tersebut, hanya saja saya hidden, agar tidak terlihat.
3. Link file hasil upload file pada point kedua, saya tambahkan tanda koma "," diakhir link agar mudah dipisah dengan menggunakan split(","). Jika Anda ingin menata dan merapikan link tersebut cukup buat var linkFile = $("#link-file").text(), arrFile = linkFile.split(","); setelah itu buat looping (perulangan)
4. Bila Anda belum pernah buat kirim via WA, Anda bisa lihat tutorial pada tahapan pertama, saat anda membuat link script google

Demikianlah tutorial tentang membuat upload banyak file sekaligus ke google drive dari blogger tanpa login. Tutorial ini memang saya buat untuk penyimpanan script, jadi bila ada yang belum dipahami mohon dimaklumi

Terimakasih sudah berkunjung, semoga bermanfaat. Amin