Membuat Progres Input Data dan Gambar Menggunakan Web Apps Script

1. Copy Spreadsheet (Klik Disini)

2. Buatlah folder baru pada Google Drive untuk menyimpan berkas.

3. Pada spreadsheet terdapat 1 sheet Data dengan beberapa kolom yang akan terisi dari form input pada Web Apps Script.

4. Buatlah lembar kerja Apps Script dengan cara klik menu Ekstensi/Extensions lalu pilih Apps Script.

5. Pada lembar kerja Apps Script terdapat 7 file default yaitu :

Code.gs
index.html
mgs.html
ScriptJS.html
StyleCSS.html
StyleCSSDemo.html
Visit.html

6. Copy dan pastekan script di bawah ini ke Code.gs

*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video)

// Source Code by www.javabitpro.com

function doGet(e) {
  var htmlOutput = HtmlService.createTemplateFromFile('index');
  htmlOutput.message = '';
  var output = htmlOutput.evaluate();
  output.setTitle('Javabitpro');
  output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  output.setFaviconUrl('https://i.imgur.com/thmO7Xv.png');
  return output;
}

function doPost(e) {
  
  Logger.log(JSON.stringify(e));
  
  var destination_id = 'ID_Folder';  // ISI ID FOLDER;
  var destination = DriveApp.getFolderById(destination_id);
  var data = Utilities.base64Decode(e.parameter.fileData);
  var blob = Utilities.newBlob(data, e.parameter.mimeType, e.parameter.fileName);
  destination.createFile(blob);
  listRecord(e.parameter.namadepan, e.parameter.namabelakang, e.parameter.username, e.parameter.email, e.parameter.telp,  e.parameter.tanggallahir, e.parameter.alamat1, e.parameter.alamat2, e.parameter.kabupaten, e.parameter.kecamatan, e.parameter.desa, e.parameter.kodezip, e.parameter.fileName); 
  var htmlOutput =  HtmlService.createTemplateFromFile('msg');
  htmlOutput.message = 'Data Berhasil Tersimpan';
  var output = htmlOutput.evaluate();
  output.setTitle('Javabitpro');
  output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
  output.setFaviconUrl('https://i.imgur.com/thmO7Xv.png');
  return output;
  
}

function listRecord( namadepan, namabelakang, username, email, telp, tanggallahir, alamat1, alamat2, kabupaten, kecamatan, desa, kodezip, filename)
{
  var url = 'URL_SPREADSHEET';  //URL DARI GOOGLE SHEET;
  var ss= SpreadsheetApp.openByUrl(url);
  var recordsSheet = ss.getSheetByName("Data"); //NAMA SHEET
  recordsSheet.appendRow([new Date(), namadepan, namabelakang,username,email,telp,tanggallahir,alamat1,alamat2,kabupaten,kecamatan,desa,kodezip, filename]);
}

function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

Pada point ke 18 sesuaikan ID_Folder dengan ID Folder yang telah di buat di atas.