02/02/2026
Latest:

152 Lượt xem
Học Ms excelKỹ năng vi tính

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

giaoanppt

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:

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>





giaoanppt

Giaoan.link trang chia sẽ giáo án điện tử, bài giảng powerpoint, template powerpoint, nguyên liệu làm bài giảng, tài liệu, biểu mẫu miễn phí!