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:

• Biến Google Sheets thành Dashboard “Viễn Tưởng” phong cách Cyberpunk
• Google appscript | Hệ thống tìm thông tin và nhập liệu 2 Form-Tự động truy vấn và upload nhiều files
• Google sheet Webapp|Giáo viên chủ nhiệm quản lý điểm, thống kê xếp hạng chia sẻ cho phụ huynh
• Google sheet Webapp | Bản nâng cấp Tìm và Load Thông tin sinh viên có Hình ảnh và Bảng kết quả thi
• Google webapp | Form tìm, hiển thị kết quả học tập nhiều môn và in phiếu kết quả
• Danh mục các Bài học Google sheet Apps script Cơ bản
• Bản Nâng cấp Hệ thống hóa đơn Phân quyền Quản lý khách Quản lý sản phẩm Quản lý hóa đơn
• Tạo webapp import và update dữ liệu từ Excel lên Google sheet có Load bảng Table lên nền tảng web
• Google sheet, appscript và webapp  – Giải pháp thu hoạc phí toàn diện
• Quản Lý Học Phí Bằng Google Apps Script: Form CRUD, Tìm Kiếm, In Phiếu Thu và Tự Động Tính Toán

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”