Cara Buat Layanan Upload File di blogger (blogspot)

www.azid45.web.id - Cara Buat Layanan Upload File di blogger (blogspot). Assalamualaikum.wr.wb pada kesempatan ini saya akan share pengelaman tentang upload file di blog/web platform blogger. Upload file kali ini hampir sama dengan tutorial sebelumnya tentang "Cara Upload File Ke Google Drive di Blogger" hanya saja bila tutorial sebelumnya harus pakai iframe namun untuk tutorial kali ini langsung pakai HTML didalam bloggernya sehingga lebih flexible dalam setting tampilan maupun edit fitur penggunaannya.

Mungkin Anda akan berfikir, untuk upload file seharusnya butuh hosting untuk penyimpanan hasil uploadnya bukan?. Ya, memang benar di web besar seperti platform wordpress bisa membuat layanan upload file karena ada hosting penyimpanan. Sedangkan kalau blogger apa bisa seperti itu?

Secara umum blogger sendiri memang layanan dari google untuk sarana posting artikel saja, tidak bisa untuk upload file di blog kecuali harus di akun bloggernya dan harus login. Tentunya hal ini akan merepotkan kita sebagai pengguna blogger terutama buat Toko Online Blogger yang membutuhkan fitur upload file buat bukti pembayaran atau file tertentu misalnya. 

Kalau kita menggunakan layanan form google juga tidak akan memungkinkan, sebab pengguna yang akan upload file juga harus login terlebih dahulu. Apakah ada solusi dari permasalahan ini, ataukah harus berganti platform dari blogger ke wordpress agar bisa menggunakan fitur upload file?

Dari permasalahan inilah akhirnya saya menemukan solusi upload file di template blogger, dimana pengguna tanpa harus login. Cara ini menggunakan layanan penyimpanan file google drive yang diintegrasikan dengan script google. 

Bagi Anda pengguna template simplebli blogger bisa menggunakan cara ini dengan langkah-langkah sebagai berikut:

NB: untuk template selain simplebli blogger dan simple produk Anda bisa ubah kode getRandom(phonenumber) dengan nomor Wa Anda, kasih tanda petik sebelum dan sesudah nomor, kurang lebih seperti ini '6289677337414'. (Kode ini ada ditahap kedua)

Tahap Pertama: Membuat Link Google Script

Pertama, login akun google. Jika sudah bisa masuk ke script goolge dengan klik link https://script.google.com. 

Kedua, buat project baru dengan cari klik tombol project baru yang terletak di pojok atas sebelah kiri. Setelah itu ubah dulu dengan tampilan lama, dengan cara klik tulisan "Gunakan Editor Lama" yang terletak di sebelah kanan.

Ketiga, hapus script bawaan script google pada file dengan nama code.gs setelah itu ganti dengan script dibawah ini:

function doPost(e) {
  const folderId = "1jf3kUTMXRFMgFLQw4rMJ6b4b7dnWiw4E";  // Or Folder ID which is used for putting the file instead of "root", if you need.

  const blob = Utilities.newBlob(JSON.parse(e.postData.contents), e.parameter.mimeType, e.parameter.filename);
  const file = DriveApp.getFolderById(folderId).createFile(blob);
  const responseObj = {filename: file.getName(), fileId: file.getId(), fileUrl: file.getUrl()};
  return ContentService.createTextOutput(JSON.stringify(responseObj)).setMimeType(ContentService.MimeType.JSON);
}

NB:Ganti kode  "1jf3kUTMXRFMgFLQw4rMJ6b4b7dnWiw4E" dengan ID folder google drive milik Anda. Caranya bisa masuk ke akun google drive, buat folder baru jika sudah klik folder tersebut, pada addressbar akan ada link kurang lebih seperti ini "https://drive.google.com/drive/u/0/folders/1jf3kUTMXRFMgFLQw4rMJ6b4b7dnWiw4E" copy saja pada bagian yang saya bold, kemudian pastekan ke script diatas.

Keempat, klik icon save, untuk menyimpan script googlenya dan jangan lupa beri nama sesuai kebutuhan, contoh "Upload File Gdrive".

Kelima, 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 protected]), 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 google script pada bagian modal popup current web app URL stelah itu baru klik OK. link tersebut nantinya akan kita buat untuk response file ke google drive, jadi simpan terlebih dahulu link tersebut.

Tahap Kedua: Memasang Kode Upload File di Blogger

Pertama, masuk akun blogger.

Kedua, menuju menu halaman/page, setelah itu buat new page (halaman baru). Pada bagian sebelah kiri atas ada icon pensil klik aja dan pilih dengan menampilkan HTML

Ketiga, copy kode berikut di kolom halaman.

<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;
  }
</style>
<form id="form-upload">
  <div class="datainput">
      <input name="fullname" id="fullname" placeholder="Nama Lengkap" type="text">
  </div>
  <div class="datainput">
      <input name="filename" id="filename" placeholder="Nama File" type="text">
  </div>
  <div class="datainput">
    <input name="file" id="uploadfile" type="file">
    <input id="submit-file" type="submit" value="Upload File">
  </div>
  <div id='uploaded'></div>
</form>
<input id="kirim-file-upload" type="button" value="Kirim Bukti Transfer"/>
<script>
const form = document.getElementById('form-upload');
const upload = document.getElementById('uploaded');
form.addEventListener('submit', e => {
  e.preventDefault();
  const file = form.file.files[0];
  const fr = new FileReader();
  fr.readAsArrayBuffer(file);
  var progressUpload = "Proses upload file, silahkan ditunggu";
  upload.innerHTML = progressUpload;
fr.onload = f => {
  // I added below script.
  let newName = form.filename.value;
  const orgName = file.name;
  if (orgName.includes(".")) {
    const orgExt = orgName.split(".").pop();
    if (orgExt != newName.split(".").pop()) {
      newName = newName ? `${newName}.${orgExt}` : orgName;
    }
  }
  
  const url = "https://script.google.com/macros/s/AKfycbyAEjKUpgPu-OC88CD45FHdt4fTAsQLlndj0oqeu9KM53rzsHTd/exec";
  
  const qs = new URLSearchParams({filename: newName, mimeType: file.type});  // Modified
  fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
  .then(res => res.json())
  .then(e => upload.innerHTML = '<p class="center">File berhasil terupload</p><a id="linkfile" href="'+e.fileUrl+'" target="_blank" rel="noopener nofollow">Lihat File</a>')  // <--- You can retrieve the returned value here.
  .catch(err => console.log(err));
}
});
  $('#kirim-file-upload').click(uploadedFile);
  function uploadedFile() { 
    var walink = 'https://web.whatsapp.com/send'; 
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
      var walink = 'whatsapp://send'; 
    } 
    var namaUploaded = '*Nama Lengkap* : ' + $("#fullname").val();
    var namaFile = '*Nama File* : ' + $("#filename").val();
    var linkFile = '*Link File* : ' + $("#linkfile").attr("href");
    console.log(linkFile)
    var nomorHP = getRandom(phonenumber);
    var teksPesan = "Hai, Mas Azid saya sudah kirim file, berikut detailnya:";
    var kirimFile = walink + '?phone=' + nomorHP + '&text=' + teksPesan + '%0A%0A' + namaUploaded + '%0A' + namaFile + '%0A' + linkFile;
    window.open(kirimFile,'_blank');
  }
</script>

Untuk bagian script itu menggunakan jQuery, jadi bila ditemplate Anda tidak terdapat jQuery Anda bisa menggunakan script menggantinya dengan script dibawah ini

  document.getElementById('kirim-file-upload').addEventListener('click', e => {
    e.preventDefault()
    var walink = 'https://web.whatsapp.com/send'; 
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
      var walink = 'whatsapp://send'; 
    } 
    var namaUploaded = '*Nama Lengkap* : ' + document.getElementById('fullname').value;
    var namaFile = '*Nama File* : ' + document.getElementById('filename').value;
    var linkFile = '*Link File* : ' + document.getElementById('linkfile').getAttribute('href');
    console.log(linkFile)
    var nomorHP = getRandom(phonenumber);
    var teksPesan = "Hai, Mas Azid saya sudah kirim file, berikut detailnya:";
    var kirimFile = walink + '?phone=' + nomorHP + '&text=' + teksPesan + '%0A%0A' + namaUploaded + '%0A' + namaFile + '%0A' + linkFile;
    window.open(kirimFile,'_blank');
  });

Upadate (03 Agustus 2023) Kode Javascript, dan menyatukan kode CSS dan HTML

<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;
  }
</style>
<form id="form-upload">
  <div class="datainput">
      <input name="fullname" id="fullname" placeholder="Nama Lengkap" type="text">
  </div>
  <div class="datainput">
      <input name="filename" id="filename" placeholder="Nama File" type="text">
  </div>
  <div class="datainput">
    <input name="file" id="uploadfile" type="file">
  </div>
  <div id='uploaded'></div>
</form>
<input id="kirim-file-upload" type="button" value="Kirim Bukti Transfer"/>
<script>
const form = document.getElementById('uploadfile');
const upload = document.getElementById('uploaded');
form.onchange = function(){
  const file = document.getElementById("uploadfile").files[0];
  const fr = new FileReader();
  fr.readAsArrayBuffer(file);
  var progressUpload = "Proses upload file, silahkan ditunggu";
  upload.innerHTML = progressUpload;
fr.onload = f => {
  // I added below script.
  let newName = document.getElementById("filename").value;
  const orgName = file.name;
  if (orgName.includes(".")) {
    const orgExt = orgName.split(".").pop();
    if (orgExt != newName.split(".").pop()) {
      newName = newName ? `${newName}.${orgExt}` : orgName;
    }
  }
  
  const url = "https://script.google.com/macros/s/AKfycbxGEcqOfaBH3NAaXf8Yr6LvwLCw9oqE2fnQ408_4mWIPpg3xNfNsqlIXk7tdmru-pIo/exec";
  
  const qs = new URLSearchParams({filename: newName, mimeType: file.type});  // Modified
  fetch(`${url}?${qs}`, {method: "POST", body: JSON.stringify([...new Int8Array(f.target.result)])})
  .then(res => res.json())
  .then(e => upload.innerHTML = '<p class="center">File berhasil terupload</p><a id="linkfile" href="'+e.fileUrl+'" target="_blank" rel="noopener nofollow">Lihat File</a>')  // <--- You can retrieve the returned value here.
  .catch(err => console.log(err));
}
};
document.getElementById('kirim-file-upload').addEventListener('click', e => {
    e.preventDefault()
    var walink = 'https://api.whatsapp.com/send'; 

    var namaUploaded = 'Nama Lengkap : ' + document.getElementById("fullname").value;
    var namaFile = 'Nama File : ' + document.getElementById("filename").value;
    var linkFile = 'Link File : ' + document.getElementById("linkfile").getAttribute("href");
    console.log(linkFile)
    var phonenumber = "62895326509469";
    var nomorHP = phonenumber;
    var teksPesan = "Hai, Mas Azid saya sudah kirim file, berikut detailnya:";
    var kirimFile = walink + '?phone=' + nomorHP + '&text=' + teksPesan + '%0A%0A' + namaUploaded + '%0A' + namaFile + '%0A' + linkFile;
    window.open(kirimFile,'_blank');
  });
</script>

NB: Ganti link https://script.google.com/macros/s/AKfycbyAEjKUpgPu-OC88CD45FHdt4fTAsQLlndj0oqeu9KM53rzsHTd/exec dengan link google script yang sudah Anda buat di tahap pertama, ganti kode #4f9854 bila ingin ganti background hijau, serta jangan lupa ganti juga tulisan Hai mas Azid, ... sesuai dengan yang Anda butuhkan.

Keempat, Publikasikan.

Demo

Tambahan:

Agar link file google drive langsung bisa diakses dan dilihat tanpa login, Anda bisa masuk terlebih dahulu ke akun google drive, kemudian pada folder penyimpanan yang sudah kita buat klik kanan dan pilih share. Ganti kata dibatasi dengan siapa saja bisa lihat file.

Dengan tahapan tersebut kita sudah bisa buat upload file di blogger. Perlu diingat maksimum upload file adalah 50Mb, jadi bila file yang akan diupload lebih besar dari 50Mb maka Anda bisa jadikan Rar yang di bagi menjadi beberapa part. Selain itu pastikan juga kapasitas penyimpanan Google dirve Anda mencukupi, bila sudah penuh lebih baik hapus file yang tidak penting, kemudian masuk ke menu sampah untuk hapus file secara permanen.

Demikianlah tutorial tentang Cara Upload File di Platform Blogger Tanpa login Akun Blogger. Semoga bermanfaat. Amin