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:

• 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

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”