#JP36 Menampilkan Gambar Sebelum Diupload Apps Script

Menampilkan Gambar Sebelum Diupload Apps Script

1. Copy Spreadsheet (Klik di sini)

2. Buatlah folder baru pada Google Drive untuk menyimpan hasil gambar

3. Bagikan folder Google Drive.

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

5. Terdapat 3 file yaitu :

Code.gs
index.html
msg.html

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

Masukkan Password(Password ada di dalam video youtube)

function doGet(e) {
  var htmlOutput =  HtmlService.createTemplateFromFile('index');
  htmlOutput.message = '';
  return htmlOutput.evaluate();
}

function doPost(e) {
  
  Logger.log(JSON.stringify(e));
  
  var destination_id = '1FkVgn3VrOWlWAJKK9mwzWb7p0YPYqgOP';  // 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.username, e.parameter.fileName); 
  var htmlOutput =  HtmlService.createTemplateFromFile('msg');
  htmlOutput.message = 'Gambar Berhasil di Upload';
  return htmlOutput.evaluate();
  
}

function listRecord(username, filename)
{
  var url = 'https://docs.google.com/spreadsheets/d/1PBYlgXLFYK5qQ0BXAKycW2SRJjdoFhkpNfFoLIR2pZc/edit#gid=0';  //URL DARI GOOGLE SHEET;
  var ss= SpreadsheetApp.openByUrl(url);
  var recordsSheet = ss.getSheetByName("Sheet1"); //NAMA SHEET
  recordsSheet.appendRow([new Date(), username, filename]);
}

function getUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

7. Copy dan pastekan script di bawah ini ke index.html

Masukkan Password sama seperti di atas!

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
input[type=file]::file-selector-button {
  border: 1.5px solid #00cec9;
  padding: .3em .5em;
  border-radius: 5px;
  background-color: #0066ff;
  font-size: .9em;
  font-weight: bold;
  color: #ffffff;
  transition: 1s;
}

input[type=file]::file-selector-button:hover {
  background-color: #1a1aeb;
  border: 1.5px solid #0000ff;
  color: azure;
}
input[type=text]{
  border: 2px solid #000000;
  width: 115px;
  border-radius: 5px;
  outline: none;
  font-size: .8em;
  color: #000000;
  font-weight: bold;
  padding: .2em .4em;
   
}
input[type=text]:hover{
  border: 2px solid #000000 ;
  color:#000000;
}

input[type=submit]{
  border: none;
  color: white;
  font-weight:bold;
  margin-bottom: 4px;
  margin-top: 4px;
  padding: .5em 1.4em .4em ;
  border-radius: 5px;
  background-color: #0066ff;
  transition: 1s;
}

input[type=submit]:hover{
  background-color: #1a1aeb;
}

    </style>
  <script>
  function LoadFile(event)
  {
    var file = event.target.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      console.log(e.target.result);
      var fileData = e.target.result.substr(e.target.result.indexOf(",")+1);
      var mimeTypeStart = e.target.result.indexOf("data:") + 5;
      var mimeTypeEnd = e.target.result.indexOf(";");
      var mimeType = e.target.result.substr(mimeTypeStart, mimeTypeEnd - mimeTypeStart);
      var fileName = file.name;
      document.getElementById("fileData").value = fileData;
      document.getElementById("mimeType").value = mimeType;
      document.getElementById("fileName").value = fileName;
    };    
    reader.readAsDataURL(file);
  }
  
  </script>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    function previewFile(input){
        var file = $("input[type=file]").get(0).files[0];
 
        if(file){
            var reader = new FileReader();
 
            reader.onload = function(){
                $("#previewImg").attr("src", reader.result);
            }
 
            reader.readAsDataURL(file);
        }
    }
</script>

  </head>
  <body>
   <center><br><br>
    <div style="box-shadow: rgba(0, 0, 255, 0.32) 0px 2px 4px 0px, rgba(0, 0, 255, 0.32) 0px 2px 16px 0px;width: 280px;padding: 15px 20px 20px 20px;border-radius: 20px;"> 
    <h2 style="font-family: 'Inter', sans-serif; "><i class="fa fa-cloud-upload" style="font-size:30px;" ></i>Form Upload Gambar</h2>
    <?var url = getUrl();?>
    <form method="post" action="<?= url ?>" >
      
      <b style="color: #000000;">Nama : </b><input type="text" name="username" autocomplete="off" /><br><br>
      <input type="file" name="file" onchange={LoadFile(event),previewFile(this)} style="margin-left: 50px;color: #000000;font-weight: bold;font-size: .82em;"/>
      <br><br>
       <img id="previewImg" src="" alt=""  style="max-width: 250px;">
      <br><br>
      <input type="hidden" id="fileData" name="fileData" />
      <input type="hidden" id="mimeType" name="mimeType" />
      <input type="hidden" id="fileName" name="fileName" />
        <input type="submit" value="Upload" />
        <br>
      </center>    
      <style>.footer,.generic-footer{margin-bottom:98px}@media (min-width:52px){.footer,.generic-footer{margin-bottom:78px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:56px}}@media (min-width:52px){.footer,.generic-footer{margin-bottom:0}}.disclaimer{position:fixed;z-index:9999999;bottom:0;right:0;border-top:2px solid #ff5c62;text-align:center;font-size:14px;font-weight:400;background-color:#fff;padding:5px 10px 5px 10px}.disclaimer a:hover{text-decoration:underline}@media (min-width:52px){.disclaimer{text-align:right;border-left:2px solid red;border-top-left-radius:10px}}@media (min-width:1920px){.disclaimer{width:20%}}</style><div class="disclaimer">Version.36.10.22 @Copyright <a title="https://www.javabitpro.com/" target="_blank" href="https://www.javabitpro.com/" style="color: black;"><b>www.javabitpro.com</b></a></div>    
    </form>
</div>
</center>
</body>
</html>

8. Copy dan pastekan script di bawah ini ke msg.html

Masukkan Password sama seperti di atas!

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
    <center>
      <br><br>
    <div style="box-shadow: rgba(0, 0, 255, 0.32) 0px 2px 4px 0px, rgba(0, 0, 255, 0.32) 0px 2px 16px 0px;width: 280px;padding: 15px 20px 20px 20px;border-radius: 20px;"><br><br>
      <i class="fa fa-cloud-upload" style="font-size:43px;color:blue;"> </i> <br><br>
      <b style="font-size:20px;color: #0000ff;"><span><?= message ?></span></b><br><br>
    </div>
    </center>  
  </body>
</html>