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:

• Apsscript Radio Button và Input – Sự phụ thuộc của input vào Radio button
• Bạn sử dụng zalo và bị báo đầy ổ đĩa,phải làm sao
• Google sheet Webapp Login form Tocken quản lý phiên đăng nhập, gửi mail lấy lại thông tin đăng nhập
• Chuyển bảng dữ liệu từ file PDF vào Excel
• Google sheet Apps script Hệ thống duyệt hồ sơ sinh viên – Form nhập liệu, Login duyêt, gửi mail
• Tool VBA Form Excel xử lí chuỗi tạo folder hàng loạt theo danh sách
• Google sheet webapp | Quản lý quán Cà phê – Phân quyền- Quét QR chấm công- Quản lý nhân viên-Báo cáo
• VBA Excel Xây dựng hàm chuyển chuỗi có dấu thành không dấu, khoản trắng thành dấu –
• Google sheet Webapp | Lấy dữ liệu trên Sheet hiển thị dạng Bảng có phân trang trùy chọn trên website
• Web App Script | Trang trắc nghiệm online hỗ trợ hình ảnh, lưu file kết quả – Form nhập bộ câu hỏi

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>