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 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 defineOneEntry từ SDK 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": "File",
    "titleForSite": "",
    "successMessage": "Successful data processing",
    "unsuccessMessage": "Unsuccessful data processing",
    "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": "File"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "image",
      "marker": "image",
      "isLogin": null,
      "isSignUp": null,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Image"
      },
      "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": "Images group"
      },
      "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 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. Get additional settings for the form submission
  const moduleFormConfig = fileForm?.moduleFormConfigs?.[0];

  // 5. Preparing form data
  const formData = [
    {
      marker: 'file',
      type: 'file',
      value: file,
      fileQuery: {
        type: 'page',
        entity: 'editor',
        id: 4965,
      },
    },
  ];

  // 6. Submitting a form with FormData.postFormsData()
  const postFormResp = await FormData.postFormsData({
    formIdentifier: 'file',
    formData: formData,
    formModuleConfigId: moduleFormConfig.id,
    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"
  >
    Send
  </button>
</form>

Kết quả:

{
  "formData": {
    "formIdentifier": "file",
    "time": "2025-11-10T06:30:56.488Z",
    "formData": [
      {
        "marker": "file",
        "type": "file",
        "value": [
          {
            "filename": "files/project/page/4965/editor/4f82c7e0-b1c5-4144-b7dc-202e3b50d357.json",
            "downloadLink": "https://your-project.oneentry.cloud/cloud-static/files/project/page/4965/editor/4f82c7e0-b1c5-4144-b7dc-202e3b50d357.json",
            "size": 259391
          }
        ]
      }
    ],
    "entityIdentifier": "services",
    "fingerprint": "UQ_rrofe2",
    "isUserAdmin": false,
    "formModuleId": 3,
    "userIdentifier": null,
    "parentId": null,
    "id": 119
  },
  "actionMessage": "Successful data processing"
}

Ví dụ cuối cùng

// 1. Import defineOneEntry from SDK and define PROJECT_URL and APP_TOKEN
import { defineOneEntry } from 'oneentry';

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

// 2. Creating an API client 
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. Get form by marker from OneEntry
const fileForm = await Forms.getFormByMarker('file');

// 3.1 Uploading a file with form input=file
// JS
const selectedFiles = [];
const handleFileChange = (e) => {
  selectedFiles = e.target.files;
};

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

  // 4. Get additional settings for the form submission
  const moduleFormConfig = fileForm.moduleFormConfigs[0];

  // 5. Preparing form data
  const formData = [
    {
      marker: 'file',
      type: 'file',
      value: file,
      fileQuery: {
        type: 'page',
        entity: 'editor',
        id: 4965,
      },
    },
  ];

  // 6. Submitting a form with FormData.postFormsData()
  const postFormResp = await FormData.postFormsData({
    formIdentifier: 'file',
    formData: formData,
    formModuleConfigId: moduleFormConfig.id,
    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"
  >
    Send
  </button>
</form>