Membuat Folder Otomatis Setiap Upload File Drag and Drop Menggunakan Web Apps Script (Versi 2)

1. Copy Spreadsheet (Klik Disini)

2. Buatlah folder baru pada Google Drive sebagai folder utama.

3. Pada Spreadsheet yang tekah di copy di atas terdapat 1 sheet Data dan beberapa kolom.

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

5. Pada lembar kerja Apps Script terdapat 3 file default dan 1 layanan yaitu :

File Code.gs
File Index.html
File Visit.html
Layanan Drive API (Free)

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() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
        .setFaviconUrl('https://i.imgur.com/thmO7Xv.png'); 
        
}
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function uploadFileToDrive(name, mimeType, bytes, folderName) {
  var parentFolderId = 'ID_FOLDER'; // Ganti dengan ID folder Google Drive induk
  var parentFolder = DriveApp.getFolderById(parentFolderId);
  
  // Cek apakah folder dengan nama tersebut sudah ada
  var folder;
  var folders = parentFolder.getFoldersByName(folderName);
  if (folders.hasNext()) {
    folder = folders.next();
  } else {
    // Jika folder belum ada, buat folder baru
    folder = parentFolder.createFolder(folderName);
  }
  
  // Buat file di dalam folder yang sudah dibuat atau ditemukan
  var file = folder.createFile(
    Utilities.newBlob(Utilities.base64Decode(bytes), mimeType, name)
  );

  // Mengembalikan URL file yang baru diunggah
  return file.getUrl();
}

function submitData(formData) {
  const sheet = SpreadsheetApp.openById('ID_SPREADSHEET').getSheetByName('Data');
  
  formData.fileData.forEach(file => {
    const folderName = formData.nama; // Gunakan nama input sebagai nama folder
    const url = uploadFileToDrive(file.name, 'application/pdf', file.data, folderName);
    sheet.appendRow([formData.nama, formData.alamat, file.name, url]);
  });
}

Pada point 17 sesuaikan ID_FOLDER dengan Id Folder utama yang sudah dibuat pada Google Drive di atas.

Pada point 40 sesuaikan ID_SPREADSHEET dengan Id Spreadsheet yang telah di copy di atas.

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

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <!-- font-awesome@6.2.0 icon Visit -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
  <?!= include('Visit')?>
  <style>
    body {
      background-color: #152733;
      color: #fff;
      
      
    }
    #drop_zone {
      border: 2px dashed #ccc;
      border-radius: 20px;
      padding: 20px;
      text-align: center;
      font: 20pt bold 'Vollkorn';
      color: #ccc;
      margin-bottom: 20px;
      background-color: #0e324b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .file-list {
      list-style: none;
      padding: 0;
    }
    .file-list li {
      margin: 5px 0;
    }
    .form-control {
      background-color: #0e324b;
      color: #fff;
      border: 1px solid #ccc;
    }
    .form-control:focus {
      border-color: #fff;
      box-shadow: none;
    }
    .modal-content {
      color: #000; /* Warna teks modal */
    }
    .container-box {
      border: 1px solid #ccc; /* Border untuk container */
      border-radius: 10px; /* Optional: untuk border yang melengkung */
      padding: 20px; /* Padding di dalam container */
      background-color: #081e2c; /* Background color untuk container */
      max-width: 600px; /* Maksimal lebar untuk container */
      margin: auto; /* Center the container */
    }
    .fa-images {
      font-size: 50px;
      margin-bottom: 10px;
    }
     h3, p {
      text-align: center;
    }
    .custom-img {
      width: 100px; /* Lebar gambar */
      height: 100px; /* Tinggi gambar */
      object-fit: cover; /* Untuk memastikan gambar memenuhi kotak tanpa terdistorsi */
      border: 2px solid #ccc; /* Optional: border untuk gambar */
      border-radius: 10px; /* Optional: sudut melengkung */
      margin: 20px auto; /* Menengahkan gambar */
      display: block; /* Membuat gambar menjadi blok */
    }
  </style>
</head>
<body>
  <!-- Modal untuk Spinner -->
  <div class="modal fade" id="spinnerModal" tabindex="-1" role="dialog" aria-labelledby="spinnerModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-body text-center">
          <div class="spinner-border" role="status">
            <span class="sr-only">Loading...</span>
          </div>
          <p class="mt-2">Proses upload, mohon ditunggu...</p>
        </div>
      </div>
    </div>
  </div>

  <div class="container mt-5 container-box">
    <img src="https://i.imgur.com/Ox9DC3r.gif" alt="Your Image" class="custom-img mx-auto">
      <h3>Upload Multi Files</h3>
      <p>Automatic Create Folder (Versi 2)</p>
    <div class="row justify-content-center">
      <div class="col-md-8">
        <form id="myForm">
          <div class="form-group">
            <label for="nama">Nama:</label>
            <input type="text" class="form-control" id="nama" name="nama">
          </div>
          <div class="form-group">
            <label for="alamat">Alamat:</label>
            <input type="text" class="form-control" id="alamat" name="alamat">
          </div>
          <div class="form-group">
            <label for="file">Upload Berkas:</label>
            <div id="drop_zone" class="border">
              <i class="fas fa-images"></i>
              Drop files here or click to upload
            </div>
            <input type="file" id="file" name="file" multiple style="display: none;">
            <ul id="file_list" class="file-list mt-3"></ul>
          </div>
          <button type="button" class="btn btn-info btn-lg btn-block" onclick="handleFileUpload()">Submit</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Modal untuk Sukses -->
  <div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="successModalLabel">Success!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Data dan Berkas Berhasil Disimpan!
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
        </div>
      </div>
    </div>
  </div>

  <script>
    const dropZone = document.getElementById('drop_zone');
    const fileInput = document.getElementById('file');
    const fileList = document.getElementById('file_list');

    dropZone.addEventListener('click', () => fileInput.click());

    dropZone.addEventListener('dragover', (e) => {
      e.stopPropagation();
      e.preventDefault();
      e.dataTransfer.dropEffect = 'copy';
    });

    dropZone.addEventListener('drop', (e) => {
      e.stopPropagation();
      e.preventDefault();
      fileInput.files = e.dataTransfer.files;
      updateFileList(e.dataTransfer.files);
    });

    fileInput.addEventListener('change', (e) => {
      updateFileList(e.target.files);
    });

    function updateFileList(files) {
      fileList.innerHTML = '';
      Array.from(files).forEach(file => {
        const li = document.createElement('li');
        li.textContent = file.name;
        fileList.appendChild(li);
      });
    }

    function handleFileUpload() {
      const nama = document.getElementById('nama').value;
      const alamat = document.getElementById('alamat').value;
      const files = fileInput.files;

      if (!nama || !alamat) {
        showAlert('Nama dan Alamat harus diisi.');
        return;
      }

      if (files.length === 0) {
        showAlert('Please select or drop files to upload.');
        return;
      }

      $('#spinnerModal').modal('show'); // Tampilkan modal spinner

      let fileData = []; // Menyimpan data file dan nama file

      Array.from(files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
          const base64Data = e.target.result.split(',')[1];
          const fileName = file.name; // Ambil nama file

          fileData.push({ name: fileName, data: base64Data });

          // Jika semua file sudah terunggah
          if (fileData.length === files.length) {
            submitForm(nama, alamat, fileData); // Kirim data form beserta file ke server
          }
        };
        reader.readAsDataURL(file);
      });
    }

    function submitForm(nama, alamat, fileData) {
      const formData = {
        nama: nama,
        alamat: alamat,
        fileData: fileData
      };
// www.javabitpro.com
      google.script.run.withSuccessHandler(function() {
        $('#spinnerModal').modal('hide'); // Sembunyikan modal spinner setelah selesai
        $('#successModal').modal('show'); // Tampilkan modal sukses
        document.getElementById('myForm').reset(); // Reset form
        fileList.innerHTML = ''; // Kosongkan daftar file
      }).submitData(formData);
    }

    function showAlert(message) {
      $('#alertModal .modal-body').text(message);
      $('#alertModal').modal('show');
    }
  </script>

  <!-- JavaScript untuk Bootstrap -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

  <!-- Modal untuk Alert -->
  <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="alertModalLabel">Peringatan!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <!-- Pesan alert akan ditampilkan di sini -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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

Masukkan Password Untuk Melihat Script (Password sama dengan di atas)

<link href="https://cdn.jsdelivr.net/gh/javabitpro/css@main/javabitprovisit.css" rel="stylesheet">
	<div class="fab-container2">

  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			
		</div>
		<ul class="fab-options">
			<li>
				<span class="fab-label">Youtube</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.youtube.com/watch?v=yEiExdVc-6U&list=PLDeNeiwBHjwYg7_gz2vDA1D6QfBiMgIj6&index=86"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 10px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://s.id/javabitpro"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>			
		</ul>
	</div>