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:

• 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 trong trycatch 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-08-29T17:31:42.196Z",
    "formData": [
      {
        "marker": "file",
        "type": "file",
        "value": [
          {
            "filename": "files/project/page/4965/editor/live-adv-1-1756488701913.svg",
            "downloadLink": "https://test-data.oneentry.cloud/cloud-static/files/project/page/4965/editor/live-adv-1-1756488701913.svg",
            "size": 6131
          }
        ]
      }
    ],
    "id": 96
  },
  "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>