Google sheet Apps script | Form nhập liệu với chức năng upload nhiều ảnh cho một Record

Như phần tiêu đề, project “Form nhập liệu với chức năng upload nhiều ảnh cho một Record” này sẽ giúp bạn tạo một form nhập liệu với chức năng thêm nhiều file ảnh hoặc các file khác cho cùng một record (thông tin của một người). Với giao diện thân thiện, trực quan. Bạn dễ dàng view thông tin profile và edit cũng như xóa nó. 

Dưới đây là video hướng dẫn và code apps script mẫu trong project, bạn xem và thực hiện theo là được.

||Tìm kiếm các project google sheet, app script, excel tại kho này

Xem các project ngẫu nhiên:

• Google sheet Apps script Webapp | Tạo QR Code động – Tự động load mã QR mới khi nội dung mã hóa đổi
• Googlesheet Apps script Webapp | Tạo trang trắc nghiệm online như Quiz
• Google sheet Apps script | Trang trắc nghiệm Quiz – Cập nhật câu hỏi, trả lời, thời gian đếm ngược
• Google sheets | Number to text, Hàm đọc số thành chữ Ứng dụng taoh hóa đơn, phiếu chi.
• Googlesheet Apps script Webapp | Tạo mã QR Code từ nội dung nhập vào – QR Code Generator
• Google sheet apps script | Dropdown đơn giản lấy dữ liệu từ google sheet – Simple dropdown
• Apps script Webapp CSS – HTML – JS | Tạo ứng dụng Ghi chú trên nền tảng webapp – website
• Google sheet Apps script | Hàm setTimeout định thời gian xóa các trường Input khi click Button
• Apps script Webapp | Sử dụng CSS tạo hiệu ứng sóng nước – Trang trí đẹp mắt cho web và blog.
• Google sheet Apps script Tiện ích tạo mã vạch (barcode) trên webapp

Mã trên trang “Code.gs”

const FOLDER_NAME = "Uploads";

const schema = {
  sheetName: "Profile",
  title: "HỒ SƠ",
  titleDetailView: "HỒ SƠ",
  formWidth: 800,
  defaultFormValues: {},
  fields: [
    {
      type: "input",
      inputType: "text",
      key: "name",
      label: "Họ và Tên",
      colWidth: 200,
      placeholder: "",
      required: true,
      sort: {
        order: 1,
      },
    },
    {
      type: "input",
      inputType: "email",
      key: "email",
      label: "Email",
      colWidth: 200,
      placeholder: "Enter email",
      required: true,
    },
    {
      type: "input",
      inputType: "date",
      key: "age",
      label: "Năm sinh",     
      colWidth: 100,
      placeholder: "",
      required: true,      
    },
    {
      type: "files",
      key: "attachments",
      label: "Hình ảnh",
      placeholder: "",
      required: false,
    },
  ],
};

const getStringiFiedTables = (sheetNames) => {
  var tables = {};
  sheetNames.forEach((sheetName) => {
    const vals = SpreadsheetApp.getActiveSpreadsheet()
      .getSheetByName(sheetName)
      .getDataRange()
      .getValues();
    tables[sheetName] = vals;
  });
  return JSON.stringify(tables);
};

function includes(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

function doGet(e) {
  var page = "index";
  var u = "";
  let data = {};
  data["schema"] = schema;

  var t = HtmlService.createTemplateFromFile(page);
  t.data = JSON.stringify(data);
  return t
    .evaluate()
    .setTitle("File Uploads")
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

function uploadFile(obj) {
  var blob = Utilities.newBlob(
    Utilities.base64Decode(obj.data),
    obj.mimeType,
    obj.fileName
  );
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var SSID = ss.getId();
  var fileInDrive = DriveApp.getFolderById(SSID);
  var parent_id = fileInDrive.getParents().next().getId();
  var par_fdr = DriveApp.getFolderById(parent_id);
  try {
    var newFdr = par_fdr.getFoldersByName(FOLDER_NAME).next();
  } catch (e) {
    var newFdr = par_fdr.createFolder(FOLDER_NAME);
  }

  var id = newFdr.createFile(blob).getId();
  const url = `https://drive.google.com/thumbnail?id=${id}&sz=w1000`;  
  return { name: obj.fileName, url, uid: obj.uid };
}
const DoSetup = (sheetNames) => {
  const apendRow = ["id", "form"];
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  sheetNames.forEach((sheetName) => {
    const sheet = ss.getSheetByName(sheetName);
    if (!sheet) {
      ss.insertSheet(sheetName).appendRow(apendRow);
    }
  });
};

class ORM {
  constructor(sheetName) {
    this.sheet =
      SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
    this.sheetName = sheetName;
  }

  // Create a new record
  create(data) {
    const id = this.getNextId() || 1;
    data["id"] = id;
    const dataRange = this.sheet.getDataRange();
    const values = dataRange.getValues();
    const headers = values[0];
    const newRow = [];

    for (const header of headers) {
      newRow.push(data[header] || "");
    }
    this.sheet.appendRow(newRow);
    values.push(newRow);
    return values;
  }

  bulkCreate(data) {
    const dataRange = this.sheet.getDataRange();
    const values = dataRange.getValues();
    const headers = values[0];
    const newRows = [];
    for (const record of data) {
      const id = this.getNextId() || 1;
      record["id"] = id;
      const newRow = [];
      for (const header of headers) {
        newRow.push(record[header] || "");
      }
      newRows.push(newRow);
    }
    this.sheet
      .getRange(values.length + 1, 1, newRows.length, headers.length)
      .setValues(newRows);
    values.push(...newRows);
    return values;
  }
  // Read all records
  readAll() {
    const dataRange = this.sheet.getDataRange();
    const values = dataRange.getValues();
    const headers = values[0];
    const records = [];
    //Returning data from multi-dimensional array
    for (let i = 1; i < values.length; i++) {
      const record = {};
      for (let j = 0; j < headers.length; j++) {
        record[headers[j]] = values[i][j];
      }
      records.push(record);
    }
    return records;
  }

  // Read a specific record by ID
  readById(id) {
    if (!id) throw new Error("ID is required");
    const dataRange = this.sheet.getDataRange();
    const values = dataRange.getValues();
    const headers = values[0];
    for (let i = 1; i < values.length; i++) {
      if (values[i][0] == id) {
        const record = {};
        for (let j = 0; j < headers.length; j++) {
          record[headers[j]] = values[i][j];
        }
        return record;
      }
    }
    return null;
  }

  // Update a record by ID
  updateById(id, data) {
    if (!id) throw new Error("ID is required");
    const dataRange = this.sheet.getDataRange();
    const values = dataRange.getValues();
    const headers = values[0];
    for (let i = 1; i < values.length; i++) {
      if (values[i][0] == id) {
        for (const key in data) {
          const columnIndex = headers.indexOf(key);
          if (columnIndex !== -1) {
            values[i][columnIndex] = data[key];
          }
        }
        dataRange.setValues(values);
        break;
      }
    }
    return values;
  }

  // Delete a record by ID
  deleteById(id) {
    if (!id) throw new Error("ID is required");
    const dataRange = this.sheet.getDataRange();
    let values = dataRange.getValues();
    for (let i = 1; i < values.length; i++) {
      if (values[i][0] == id) {
        this.sheet.deleteRow(i + 1);
        values = dataRange.getValues();
        values.pop();
        break;
      }
    }
    return values;
  }

  // Get the next ID
  getNextId() {
    const dataRange = this.sheet.getDataRange();
    const values = dataRange.getValues();
    let maxId = 0;
    for (let i = 1; i < values.length; i++) {
      const id = values[i][0];
      if (id > maxId) {
        maxId = id;
      }
    }
    return maxId + 1;
  }
}

const executeAction = ({ action, sheetName, id = null, data = null }) => {
  let res = null;
  var tables = {};
  try {
    const orm = new ORM(sheetName);

    switch (action) {
      case "add":
        res = orm.create(data);
        break;
      case "bulkAdd":
        res = orm.bulkCreate(data);
        break;
      case "duplicate":
        const found = orm.readById(id);
        if (found) {
          res = orm.create(found);
        }
        break;
      case "update":
        res = orm.updateById(id, data);

        break;
      case "delete":
        res = orm.deleteById(id);

        break;
      case "getAll":
        res = orm.readAll();
        break;
      case "getOne":
        res = orm.readById(id);
        break;
      default:
        return false;
    }
    tables[sheetName] = res;
    return JSON.stringify(tables);
  } catch (error) {
    console.log(error);
    return error;
  }
};

/**
 * @param {string} JSONData
 * @param {string} fldName
 * @return {string}
 * @customfunction
 */
function PARSE(JSONData, fldName) {
  return JSON.parse(JSONData)[fldName];
}

Mã trên trang “Index.html”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <title>NHẬP HỒ SƠ</title>
  <?!= includes("js.html"); ?>
  <?!= includes("css.html"); ?>
</head>
<body>
  <div style="height: 20px;"></div>
  <div style="text-align: center; height:50px; font-size:30px;font-weight:bold;">FORM NHẬP LIỆU VỚI UPLOAD MULTI PICTURES</div>
  <hr style="height:2px;border-width:0;color:red;background-color:red">    
      <div id="loggedUser" hidden>
        <?!= data ?>
      </div>
      <div id="app"></div>
  
</body>
</html>

Mã trên trang “css.html”

Mã trên trang “js.html”