Google Script Web | From upload file – Kiểm tra trùng lặp – Ghi đè hoặc Tạo phiên bản mới cho file

Giaoan.link chia sẻ đến các bạn một project mới về “Google Script Web | From upload file – Kiểm tra trùng lặp – Ghi đè hoặc Tạo phiên bản mới cho file”. Đối với project upload file lên google drive này nó sẽ có những đặc trưng sau.

• Sử dụng nền tảng miễn phí Google sheet, Google Drive.
• Form thiết kế các trường tùy chỉnh, có một trường upload file (file nói chung như hình ảnh, pdf, doc, excel…)
• Có sự kiểm tra tên, thể loại file upload lên drive. Nếu có sự trùng lặp tên và loại file thì sẽ xuất hiện một popup thông báo. “Có” sẽ ghi đè file đã có, “Không” thì sẽ tạo một bản sao của file.
• Bên dưới là link youtube để bạn xem video demo của project.

Các project ngẫu nhiên trên hệ thống:

• Google sheet Webapp Quản lý Lịch dạy học giáo viên trong trung tâm-Lọc theo Tên-Lớp-Khung giờ -Môn
• Google sheet webapp | CRUD FORM – ĐIỀN THÔNG TIN TỪ FORM VÀO TEMPLATE GOOGLE DOC, KÈM HÌNH ẢNH 1
• Google sheet webapp | Dropdown phụ thuộc – Truy xuất Spreadsheet và các Sheet phụ thuộc từ Folder
• Tạo hóa đơn trên Google sheet – Gửi email đính kèm hóa đơn pdf – Quản lý url hóa đơn trên danh sách
• Google sheet Ứng dụng theo dõi đơn hàng – Danh sách sản phẩm mua, trạng thái đơn hàng
• Tip on Ms Word Hướng dẫn tạo ngắt trang, xóa ngắt trang đơn lẽ hoặc toàn bộ ngắt trang trên file doc
• Google sheet | Generate QR Codes – Mã hóa nội dung Cell – Thêm hình ở giữa mã QR code
• Google sheet App Script | Tạo custom menu – Xóa tất cả dòng Rỗng trên vùng dữ liệu Nhanh chống
• Google Script Web | From upload file – Kiểm tra trùng lặp – Ghi đè hoặc Tạo phiên bản mới cho file
• Google Script Web | Trang Tìm kiếm nhiều điều kiên riêng lẽ hoặc hết hợp – Print, Xuất file PDF

Code appscript trang “Code.gs”

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

//Không kiểm tra loại file
function checkFileName(fileName) {
    var spreadsheetId = "1wjsVYW-7CEyz8g-gulAVnEV4V-tpm9qDea_IYEGeIR8";
    var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName("Data");

    var data = sheet.getRange("B:B").getValues().flat(); // Lấy danh sách tên file từ cột B

    // Chỉ lấy tên file, bỏ phần mở rộng
    var fileBaseName = fileName.split('.').slice(0, -1).join('.'); 

    // Kiểm tra danh sách, bỏ qua phần mở rộng
    return data.some(name => name.split('.').slice(0, -1).join('.') === fileBaseName);
}

function uploadFile(fileNote, fileName, fileBase64, overwrite) {
    var folderId = "1tOADwjNTavvsUo3BOOvD1yvvT1tJNlJW";
    var folder = DriveApp.getFolderById(folderId);
    
    var fileBaseName = fileName.split('.').slice(0, -1).join('.'); // Chỉ lấy phần tên file, bỏ phần mở rộng
    var fileExtension = fileName.split('.').pop(); // Lấy phần mở rộng

    var mimeType = "";
    switch (fileExtension.toLowerCase()) {
        case "jpg": case "jpeg": mimeType = MimeType.JPEG; break;
        case "png": mimeType = MimeType.PNG; break;
        case "pdf": mimeType = MimeType.PDF; break;
        case "txt": mimeType = MimeType.PLAIN_TEXT; break;
        case "doc": case "docx": mimeType = MimeType.MICROSOFT_WORD; break;
        default: mimeType = MimeType.BINARY;
    }

    var blob = Utilities.newBlob(Utilities.base64Decode(fileBase64), mimeType, fileName);
    var files = folder.getFiles();
    
    var targetFiles = [];
    while (files.hasNext()) {
        var file = files.next();
        var existingFileName = file.getName();
        var existingBaseName = existingFileName.split('.').slice(0, -1).join('.'); // Bỏ phần mở rộng

        if (existingBaseName === fileBaseName) {
            targetFiles.push(file); // Lưu danh sách các file trùng tên
        }
    }

    var fileUrl = "";
    if (targetFiles.length > 0 && overwrite) {
        targetFiles.forEach(file => file.setTrashed(true)); // Xóa tất cả các file trùng tên
        var newFile = folder.createFile(blob); // Tạo file mới với nội dung chuẩn
        fileUrl = newFile.getUrl();
    } else {
        var newFile = folder.createFile(blob);
        fileUrl = newFile.getUrl();
    }

    // Cập nhật Google Sheet
    var spreadsheetId = "1wjsVYW-7CEyz8g-gulAVnEV4V-tpm9qDea_IYEGeIR8";
    var sheet = SpreadsheetApp.openById(spreadsheetId).getSheetByName("Data");
    var data = sheet.getDataRange().getValues();

    if (targetFiles.length > 0 && overwrite) {
        for (var i = 0; i < data.length; i++) {
            if (data[i][1].split('.').slice(0, -1).join('.') === fileBaseName) {
                sheet.getRange(i + 1, 3).setValue(fileUrl); // Cập nhật URL mới
                if (fileNote.trim() !== "") {
                    sheet.getRange(i + 1, 1).setValue(fileNote); // Cập nhật ghi chú nếu có
                }
                return "File đã được ghi đè thành công!";
            }
        }
    } else {
        sheet.appendRow([fileNote.trim() !== "" ? fileNote : "Không có ghi chú", fileName, fileUrl]); // Lưu file mới
    }

    return "File mới đã được tải lên thành công!";
}

Code appscript trang “index.html”

<!DOCTYPE html>
<html>
<head>
<title>Upload File</title>
  <style>
    body{
      width: 100%;      
    }
 
    #loading {
      display: none;
      width: 40px;
      height: 40px;
      border: 5px solid #ccc;
      border-top: 5px solid #007bff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
    text-align: center;
    }

    .upload{
     width: 400px;
    height: 250px;
    background: white;
    padding: 20px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
   margin-left: auto;
      margin-right: auto;
      margin-top: 50px;
    }

    div-input {    
    width: 100%;
    }

    label {       
        text-align: left; 
        margin-right: 10px; 
           
    }

    input {
        width: 95%; /* Input chiếm 70% còn lại */
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 5px;
         margin-bottom: 10px;  
    }

    .title-upload{
      font-size: 1.5em;
      font-weight: bold;
      color: blue;
      text-shadow: 1px 1px 2px grey;
      text-align: center;
    }

    .title-upload-2{
      font-size: 1.3em;
      font-weight: bold;
      font-style: italic;
      color: red;
      text-align:center;
      margin-bottom: 20px;
    }

    .bnt-submit{
      border: 0px solid grey;      
      font-size: 14px;
      padding: 8px 10px;
      text-align: center;
      background-color: #ffc342;
      color: #000000;
      cursor: pointer;
      box-shadow: 0px 0px 2px grey;
      margin-top: 10px;   
    }

    .bnt-submit:hover{
      box-shadow: 2px 2px 3px grey;
      font-weight: bold;

    }

    .bnt-yes{
      border: 1px solid red;      
      font-size: 14px;
      padding: 5px 7px;
      text-align: center;
      background-color: red;
      color: #ffffff;
      cursor: pointer;
      box-shadow: 0px 0px 2px grey;
      margin-top: 10px;   
    }

    .bnt-yes:hover{
      box-shadow: 2px 2px 3px grey;
      font-weight: bold;
    }

    .bnt-no{
      border: 1px solid #66e500;      
      font-size: 14px;
      padding: 5px 7px;
      text-align: center;
      background-color: #66e500;
      color: #000000;
      cursor: pointer;
      box-shadow: 0px 0px 2px grey;
      margin-top: 10px;   
      margin-left: 20px;
    }

    .bnt-no:hover{
      box-shadow: 2px 2px 3px grey;
      font-weight: bold;
    }

    @media (max-width: 800px) {
    .upload {
        width: 90%;   
        height: 300px;
    }
    }
  </style>
  <script>

    let fileNameGlobal = "";
    let fileBase64Global = "";
    function handleUpload() {
        var fileInput = document.getElementById("fileInput");
        var file = fileInput.files[0];
        var fileNote = document.getElementById("fileNote").value;

        if (!file) {
            alert("Vui lòng chọn file!");
            return;
        }

        fileNameGlobal = file.name; // Lưu tên file để dùng sau
        document.getElementById("loading").style.display = "block"; // Hiện vòng xoay

        var reader = new FileReader();
        reader.onloadend = function () {
            fileBase64Global = reader.result.split(",")[1]; // Lưu nội dung file

            google.script.run.withSuccessHandler(function(exists) {
                if (exists) {
                    document.getElementById("popup").style.display = "block"; // Hiện popup
                } else {
                    google.script.run.withSuccessHandler(finalizeUpload).uploadFile(fileNote, fileNameGlobal, fileBase64Global, false);
                }
            }).checkFileName(fileNameGlobal);
        };

        reader.readAsDataURL(file);
    }

    function confirmOverwrite(overwrite) {
        document.getElementById("popup").style.display = "none"; // Ẩn popup
        if (!overwrite) {
            fileNameGlobal = fileNameGlobal.split(".")[0] + "_" + new Date().getTime() + "." + fileNameGlobal.split(".").pop();
        }
        google.script.run.withSuccessHandler(finalizeUpload).uploadFile(document.getElementById("fileNote").value, fileNameGlobal, fileBase64Global, overwrite);
    }
    
    function finalizeUpload(message) {
      document.getElementById("loading").style.display = "none"; // Ẩn vòng xoay
      alert(message);

      // Xóa nội dung các trường nhập
      document.getElementById("fileInput").value = "";
      document.getElementById("fileNote").value = "";
    }

  </script>
</head>
<body>
  <div class="upload">
      <div class="title-upload">UPLOAD FILE </div>
      <div class="title-upload-2"> (Kiểm tra trùng lặp - Ghi đè Or Lưu mới)</div>
      <div class="div-input">
      <label for="fileNote">Ghi chú:</label>
      <input type="text" id="fileNote">
      <label for="fileInput">Chọn file:</label>
      <input type="file" id="fileInput" required>
      </div>
      <div style="text-align: center">
      <button class="bnt-submit" onclick="handleUpload()">TẢI LÊN</button>
      </div>
      <div id="loading"></div>
      <div id="popup" class="popup">
        <p>Tên file đã tồn tại. Bạn có muốn chép đè?</p>
        <button class="bnt-yes" onclick="confirmOverwrite(true)">Có</button>
        <button class="bnt-no" onclick="confirmOverwrite(false)">Không</button>
      </div>
  </div>
</body>
</html>