FormData

Pada artikel ini akan membahas terkait pengiriman formulir HTML: dengan atau tanpa berkas, dengan ruas tambahan dan lainnya.

Objek FormData dapat membantu untuk melakukan hal tersebut. seperti yang Anda duga, FormData adalah sebuah objek yang merepresentasikan data formulir HTML.

Konstruktornya adalah:

let formData = new FormData([form]);

Jika elemen form HTML tersedia, maka secara otomatis ruas yang ada akan dicatat.

Hal khusus tentang FormData adalah metode koneksinya. Seperti fetch yang dapat menerima objek FormData sebagai request body kemudian dikodekan dan dikirim dengan format Content-Type: multipart/form-data.

Dari sudut pandang server, itu terlihat seperti pengiriman formulir biasa.

Mengirimkan formulir sederhana

Mari kita kirim formulir sederhana terlebih dahulu.

Seperti yang Anda lihat, itu hampir hanya satu baris:

<form id="formElem">
    <input type="text" name="name" value="John" />
    <input type="text" name="surname" value="Smith" />
    <input type="submit" />
</form>

<script>
      formElem.onsubmit = async (e) => {
        e.preventDefault();

        let response = await fetch('/article/formdata/post/user', {
          method: 'POST',
          body: new FormData(formElem)
        });

        let result = await response.json();

        alert(result.message);
      };
</script>

Pada contoh ini, kode server tidak ditampilkan karena itu diluar dari cakupan pembahasan topik ini. Server menerima request POST dan memberikan balasan “User saved”

Metode FormData

Kita dapat memodifikasi ruas formulir di FormData dengan metode:

• formData.append(nama, nilai) – menambakan sebuah ruas formulir dengan nama dan nilai yang diberikan,
• formData.append(nama, blob, namaBerkas) – menambahkan sebuah ruas formulir seolah-olah itu adalah <input type="file">, argumen ketiga namaBerkas digunakan untuk menetapkan nama berkas (bukan nama ruas formulir) seperti nama berkas yang ada di sistem berkas pengguna,
• formData.delete(nama) – menghapus ruas formulir dengan nama yang diberikan,
• formData.get(nama) – mendapatkan nilai dari ruas formulir dengan nama yang diberikan,
• formData.has(nama) – jika pada formulir terdapat ruas yang memiliki nama yang diberikan maka akan mengembalikan nilai true