Dosya ekli bir form gönderme

Bu örnekte, OneEntry API'sini kullanarak bir dosya ekini içeren bir formun nasıl gönderileceğini gösteriyoruz.

✅ Senaryonun amacı:

• OneEntry Platform'dan form yapılandırmasını almak
• Kullanıcının bir form doldurması (örneğin, yanıt, geri bildirim).
• Bir dosya eklemesi (görüntü, özgeçmiş, belge).
• Veriler ve dosya FormData içinde birlikte saklanır.
• Toplanan verileri OneEntry API'sine göndermek.

✅ İhtiyacınız olanlar:

• OneEntry API'si ile kimlik doğrulama için geçerli bir PROJECT_URL ve APP_TOKEN.
• "File" (dosya) türünde bir alan içeren OneEntry'de bir form.
• Form işaretleyicisi (örneğin, resume_form).

📌 Önemli:

• Bu örnekler hata yönetimini içermez.
• Hataları bir try-catch bloğu kullanarak veya await Promise.catch((error) => error) gibi bir yapı kullanarak yönetebilirsiniz.

Senaryo

1. oneEntry'yi içe aktarın ve url ile token'ı tanımlayın

Örnek:

import { defineOneEntry } from 'oneentry';

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

2. defineOneEntry() fonksiyonu ile bir API istemcisi oluşturma

Örnek:

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

3. OneEntry'den işaretleyici ile formu alın

Örnek:

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

Sonuç:

{
  "id": 8,
  "attributeSetId": 11,
  "type": "data",
  "localizeInfos": {
    "title": "Dosya",
    "titleForSite": "",
    "successMessage": "Veri işleme başarılı",
    "unsuccessMessage": "Veri işleme başarısız",
    "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": "Dosya"
      },
      "additionalFields": [],
      "isNotificationEmail": null,
      "isNotificationPhoneSMS": null,
      "isNotificationPhonePush": null
    },
    {
      "type": "image",
      "marker": "image",
      "isLogin": null,
      "isSignUp": null,
      "position": 2,
      "settings": {},
      "isVisible": true,
      "listTitles": [],
      "validators": {},
      "localizeInfos": {
        "title": "Görüntü"
      },
      "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": "Görüntü grubu"
      },
      "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. Form gönderimi için ek ayarları alın

Örnek:

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

5. form input=file ile bir dosya yükleme

Gönder

Veri:

// JS
let selectedFiles = null;

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

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

  // 4. Form gönderimi için ek ayarları alın
  const moduleFormConfig = fileForm?.moduleFormConfigs?.[0];

  // 5. Form verilerini hazırlama
  const formData = [
    {
      marker: 'file',
      type: 'file',
      value: file,
      fileQuery: {
        type: 'page',
        entity: 'editor',
        id: 4965,
      },
    },
  ];

  // 6. Formu FormData.postFormsData() ile gönderme
  const postFormResp = await FormData.postFormsData({
    formIdentifier: 'file',
    formData: formData,
    formModuleConfigId: moduleFormConfig?.id || 0,
    moduleEntityIdentifier: moduleFormConfig?.entityIdentifiers?.[0]?.id || '',
    replayTo: null,
    status: 'sent',
  });
};

Örnek:

// 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önder
  </button>
</form>

Sonuç:

{
  "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": "Veri işleme başarılı"
}

Son örnek

// 1. oneEntry'yi içe aktarın ve PROJECT_URL ile APP_TOKEN'ı tanımlayın
import { defineOneEntry } from 'oneentry';

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

// 2. Bir API istemcisi oluşturma
const { Forms, FormData } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// 3. OneEntry'den işaretleyici ile formu alın
const fileForm = await Forms.getFormByMarker('file');

// 3.1 form input=file ile bir dosya yükleme
// JS
const selectedFiles = [];
const handleFileChange = (e) => {
  selectedFiles = e.target.files;
};

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

  // 4. Form gönderimi için ek ayarları alın
  const moduleFormConfig = fileForm?.moduleFormConfigs?.[0];

  // 5. Form verilerini hazırlama
  const formData = [
    {
      marker: 'file',
      type: 'file',
      value: file,
      fileQuery: {
        type: 'page',
        entity: 'editor',
        id: 4965,
      },
    },
  ];

  // 6. Formu FormData.postFormsData() ile gönderme
  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önder
  </button>
</form>