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:

• Tạo hóa đơn trên Google sheet – Gửi email đính kèm hóa đơn pdf – Quản lý url hóa đơn trên danh sách
• Google sheet Ứng dụng theo dõi đơn hàng – Danh sách sản phẩm mua, trạng thái đơn hàng
• Tip on Ms Word Hướng dẫn tạo ngắt trang, xóa ngắt trang đơn lẽ hoặc toàn bộ ngắt trang trên file doc
• Google sheet | Generate QR Codes – Mã hóa nội dung Cell – Thêm hình ở giữa mã QR code
• Google sheet App Script | Tạo custom menu – Xóa tất cả dòng Rỗng trên vùng dữ liệu Nhanh chống
• 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
• Google Script Web | Trang Tìm kiếm nhiều điều kiên riêng lẽ hoặc hết hợp – Print, Xuất file PDF
• Hướng dẫn kiểm tra Bàn phím, Tháo và thay bàn phím mới cho Dell Inspirion 15 3000 series
• Google sheet webapp | Quản lý bán hàng – Chức nằn trả góp, In thông tin
• Ổ C đầy Di chuyển dữ liệu ZALO sang Ổ D hoặc ổ khác một cách dễ dàng Không lo zalo báo đầy ổ đĩa

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”