Gửi một biểu mẫu với tệp đính kèm

✅ Mục đích của kịch bản:

• Lấy cấu hình biểu mẫu từ OneEntry CMS
• Người dùng hoàn thành một biểu mẫu (ví dụ: phản hồi, ý kiến).
• Đính kèm một tệp (hình ảnh, sơ yếu lý lịch, tài liệu).
• Dữ liệu và tệp được lưu trữ cùng nhau trong FormData
• Gửi dữ liệu đã thu thập đến OneEntry API.

✅ Những gì bạn cần:

• Một PROJECT_URL và APP_TOKEN hợp lệ để xác thực với OneEntry API.
• Một biểu mẫu trong OneEntry với một trường loại "Tệp" (loại tệp)
• Dấu hiệu biểu mẫu (ví dụ: resume_form)

📌 Quan trọng:

• Chúng tôi không xử lý lỗi trong các ví dụ này.
• Bạn có thể xử lý lỗi bằng cách sử dụng try-catch hoặc trong một cấu trúc như "await Promise.catch((error) => error)"

Kịch bản

1. Nhập oneEntry và định nghĩa URL và token

Ví dụ:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. Tạo một khách hàng API với hàm defineOneEntry()

Ví dụ:

const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

Ví dụ:

const fileForm = await Forms.getFormByMarker('file');

Kết quả:

{
  "id": 8,
  "attributeSetId": 11,
  "type": "data",
  "localizeInfos": {
    "title": "Tệp",
    "titleForSite": "",
    "successMessage": "Xử lý dữ liệu thành công",
    "unsuccessMessage": "Xử lý dữ liệu không thành công",
    "urlAddress": "",
    "database": "0",
    "script": "0"
  },
  "version": 0,
  "position": 1,
  "identifier": "file",
  "processingType": "script",
  "templateId": null,
  "attributes": [
    {
      "type": "file",
      "marker": "file",
      "isLogin": null,
      "isSignUp": null,
      "position": 1,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Tệp"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "image",
      "marker": "image",
      "isLogin": null,
      "isSignUp": null,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Hình ảnh"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "groupOfImages",
      "marker": "images_group",
      "isLogin": null,
      "isSignUp": null,
      "position": 3,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Nhóm hình ảnh"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    }
  ]
}

3. Tải lên một tệp với biểu mẫu input=file

Gửi

Dữ liệu:

// JS
let selectedFiles = null;

// handleFileChange
const handleFileChange = (e: any) => {
  selectedFiles = e.target.files;
};

// handleSubmit
const handleSubmit = async (e, file) => {
  e.preventDefault();

  // 4. Chuẩn bị dữ liệu biểu mẫu
  const body = {
    formIdentifier: 'file',
    formData: [
      {
        marker: 'file',
        type: 'file',
        value: file,
        fileQuery: {
          type: 'page',
          entity: 'editor',
          id: 4965,
        },
      },
    ],
  };

  // 5. Gửi một biểu mẫu với FormData.postFormsData()
  const postFormResp = await FormData.postFormsData(body);
};

Ví dụ:

// HTML
<form
  onSubmit={(e) => handleSubmit(e, selectedFiles)}
  className="flex flex-col gap-3 p-10 border rounded-3xl"
>
  <input
    type="file"
    onChange={handleFileChange}
    className="bg-white text-slate-800 p-3 rounded-2xl"
  />
  <button
    type="submit"
    className="bg-white text-slate-800 p-3 rounded-2xl"
  >
    Gửi
  </button>
</form>

Kết quả:

{
  "formData": {
    "formIdentifier": "file",
    "time": "2025-05-12T22:28:57.531Z",
    "formData": [
      {
        "marker": "file",
        "type": "file",
        "value": [
          {
            "filename": "files/project/page/4965/editor/process-svgrepo-com-1747088937134.svg",
            "downloadLink": "https://test-data.oneentry.cloud/cloud-static/files/project/page/4965/editor/process-svgrepo-com-1747088937134.svg",
            "size": 67066
          }
        ]
      }
    ],
    "id": 76
  },
  "actionMessage": "Xử lý dữ liệu thành công"
}

Ví dụ cuối cùng

// 1. Nhập oneEntry và định nghĩa PROJECT_URL và APP_TOKEN
import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. Tạo một khách hàng API 
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

const fileForm = await Forms.getFormByMarker('file');

// 3. Tải lên một tệp với biểu mẫu input=file
// JS
const selectedFiles = [];
const handleFileChange = (e) => {
  selectedFiles = e.target.files;
};

// handleSubmit
const handleSubmit = async (e, file) => {
  e.preventDefault();

  // 4. Chuẩn bị dữ liệu biểu mẫu
  const body = {
    formIdentifier: 'file',
    formData: [
      {
        marker: 'file',
        type: 'file',
        value: file,
        fileQuery: {
          type: 'page',
          entity: 'editor',
          id: 4965,
        },
      },
    ],
  };

  // 5. Gửi một biểu mẫu với FormData.postFormsData()
  const postFormResp = await FormData.postFormsData(body);
};

// HTML
<form
  onSubmit={(e) => handleSubmit(e, selectedFiles)}
  className="flex flex-col gap-3 p-10 border rounded-3xl"
>
  <input
    type="file"
    onChange={handleFileChange}
    className="bg-white text-slate-800 p-3 rounded-2xl"
  />
  <button
    type="submit"
    className="bg-white text-slate-800 p-3 rounded-2xl"
  >
    Gửi
  </button>
</form>