Nhảy đến nội dung

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

Trong ví dụ này, chúng tôi sẽ trình bày cách gửi một biểu mẫu bao gồm một tệp đính kèm bằng cách sử dụng API OneEntry.

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

  • Lấy cấu hình biểu mẫu từ Nền tảng OneEntry
  • Người dùng điền vào 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 API OneEntry.

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

  • Một PROJECT_URL và APP_TOKEN hợp lệ để xác thực với API OneEntry.
  • 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:

  • Những ví dụ này không bao gồm xử lý lỗi.
  • Bạn có thể quản lý lỗi bằng cách sử dụng khối try-catch hoặc bằng cách sử dụng 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,
});

3. Lấy biểu mẫu theo dấu hiệu từ OneEntry​

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
    }
  ],
  "moduleFormConfigs": [
    {
      "id": 3,
      "moduleIdentifier": "content",
      "isGlobal": false,
      "isClosed": false,
      "viewOnlyUserData": false,
      "commentOnlyUserData": false,
      "entityIdentifiers": [
        {
          "id": "services",
          "isNested": false
        }
      ]
    }
  ]
}

4. Lấy các cài đặt bổ sung cho việc gửi biểu mẫu​

Ví dụ:

const moduleFormConfig = fileForm?.moduleFormConfigs?.[0];

5. Tải lên một tệp với đầu vào biểu mẫu=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. Lấy các cài đặt bổ sung cho việc gửi biểu mẫu
  const moduleFormConfig = fileForm?.moduleFormConfigs?.[0];

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

  // 6. Gửi một biểu mẫu với FormData.postFormsData()
  const postFormResp = await FormData.postFormsData({
    formIdentifier: 'file',
    formData: formData,
    formModuleConfigId: moduleFormConfig?.id || 0,
    moduleEntityIdentifier: moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
    replayTo: null,
    status: 'sent',
  });
};

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-10-23T12:38:36.507Z",
    "formData": [
      {
        "marker": "file",
        "type": "file",
        "value": [
          {
            "filename": "files/project/page/4965/editor/ad63e3ee-401a-45aa-aab2-cb6ae9ffec58.png",
            "downloadLink": "https://test-data.oneentry.cloud/cloud-static/files/project/page/4965/editor/ad63e3ee-401a-45aa-aab2-cb6ae9ffec58.png",
            "size": 119673
          }
        ]
      }
    ],
    "entityIdentifier": "services",
    "fingerprint": "UQ_n4rk15",
    "isUserAdmin": false,
    "formModuleId": 3,
    "userIdentifier": null,
    "parentId": null,
    "id": 115
  },
  "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,
});

// 3. Lấy biểu mẫu theo dấu hiệu từ OneEntry
const fileForm = await Forms.getFormByMarker('file');

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

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

  // 4. Lấy các cài đặt bổ sung cho việc gửi biểu mẫu
  const moduleFormConfig = fileForm?.moduleFormConfigs?.[0];

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

  // 6. Gửi một biểu mẫu với FormData.postFormsData()
  const postFormResp = await FormData.postFormsData({
    formIdentifier: 'file',
    formData: formData,
    formModuleConfigId: moduleFormConfig?.id || 0,
    moduleEntityIdentifier: moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
    replayTo: null,
    status: 'sent',
  });
};

// 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>