Form Terkirim Tapi Kosong? Cara Mengatasi Fetch FormData Tidak Terkirim Javascript

Ditulis oleh JavaScript

Form terkirim tapi kosong biasanya bukan fetch yang gagal. Browser mengirim request, tapi body-nya kosong karena FormData tidak berisi field yang valid. Periksa name pada input, jangan set Content-Type manual, dan jangan bungkus FormData dengan JSON.stringify.

Penyebab Fetch FormData Tidak Terkirim di Browser

Fetch mengirim apa yang ada di objek FormData. Kalau objeknya kosong atau rusak, server menerima body kosong walau status 200.

  • Input tanpa atribut name tidak masuk ke new FormData(form). Ini penyebab paling sering untuk text, checkbox, dan select.
  • File belum dipilih membuat field file kosong. input.files[0] bernilai undefined lalu request jalan tanpa file.
  • Header Content-Type: multipart/form-data ditulis manual merusak boundary. Browser harus membuat boundary sendiri.
  • FormData dibungkus JSON.stringify(formData) berubah jadi {}. FormData bukan object biasa sehingga tidak bisa di-stringify.

Tabel Diagnosis FormData Tidak Terkirim

Cek tab Network lalu lihat Request Payload. Bedakan tiga kondisi ini sebelum mengubah kode.

Error/Kondisi Penyebab Solusi
Body kosong, status 200 Input tanpa name Tambah name lalu cek formData.get()
Server tolak 400/415 Content-Type manual Hapus header Content-Type
Data jadi {} atau hilang JSON.stringify FormData Kirim objek FormData langsung

BACA JUGA:

Cara Memperbaiki Fetch FormData Tidak Terkirim

Ikut urutan ini agar sumber masalah ketahuan cepat.

1. Pastikan form memakai method="POST" dan setiap input punya name.
2. Buat FormData lalu cek isinya dengan formData.get("nama").
3. Tambah field manual bila perlu dengan formData.append().
4. Kirim tanpa header Content-Type, lalu cek response.ok.

// SALAH
fetch("/upload", {
  method: "POST",
  headers: { "Content-Type": "multipart/form-data" },
  body: JSON.stringify(formData)
});

// BENAR
const form = document.querySelector("#form-upload");
const formData = new FormData(form);

const res = await fetch("/upload", {
  method: "POST",
  body: formData
});

if (!res.ok) throw new Error("Upload gagal: " + res.status);

Kode benar membiarkan browser menyusun boundary multipart. Pengecekan response.ok penting karena fetch hanya reject saat network error, bukan saat server menjawab 400 atau 500.

Cara Mencegah FormData Gagal Terkirim Lagi

  • Validasi name, nilai kosong, dan input.files.length sebelum fetch jalan.
  • Gunakan method POST untuk upload dan data form besar.
  • Batasi tipe dan ukuran file di frontend, misalnya cek file.size dan file.type.
  • Tetap buat validasi server untuk format, ukuran, dan tipe file. Validasi frontend hanya membantu UX.

FAQ

Kenapa FormData terkirim tapi kosong di server?

Input kemungkinan tidak punya name atau FormData diubah dengan JSON.stringify sebelum dikirim.

Apakah harus set Content-Type saat kirim FormData?

Tidak. Hapus Content-Type manual agar browser membuat boundary multipart otomatis.

Kenapa fetch FormData tidak terkirim bersama file?

File mungkin belum dipilih atau input file salah diambil, cek dulu input.files[0].

Artikel Terkait