Sve što treba da znate o `FormData` objektu u JavaScript-u

Kada radite sa podacima iz HTML formi u JavaScript-u, često se susrećete sa potrebom za prikupljanjem, manipulisanjem i slanjem tih podataka na server. Ovde na scenu stupa FormData — moćan i fleksibilan API za upravljanje formama. U ovom postu ćemo detaljno objasniti kako FormData funkcioniše, njegove prednosti i kako ga možete koristiti u stvarnim scenarijima.

Šta je FormData?

FormData je ugrađeni JavaScript objekat koji omogućava:

• Jednostavno prikupljanje podataka iz HTML formi.




• Slanje tih podataka serveru koristeći fetch API ili XMLHttpRequest.




• Rad sa binarnim podacima, poput fajlova.

Ovaj objekat automatski formatira podatke u skladu sa MIME tipom multipart/form-data, što ga čini idealnim za slanje složenih podataka, uključujući fajlove.

Kako kreirati FormData objekat?

Kreiranje praznog FormData objekta

Ako želite ručno da dodate podatke, koristite prazan FormData konstruktor:

const formData = new FormData();

formData.append('username', 'Jelena');

formData.append('email', '[email protected]');

Kreiranje FormData objekta iz forme

Ako imate HTML formu, možete direktno proslediti referencu forme FormData konstruktoru, što će automatski prikupiti sve podatke iz nje.

const form = document.getElementById('registrationForm');

const formData = new FormData(form);

Dodavanje podataka

Podaci se dodaju pomoću metode .append(key, value):

formData.append('firstName', 'Jelena');

formData.append('lastName', 'Petković');

Ako dodajete fajl iz <input type="file">, prosto koristite .files[0]:

const fileInput = document.getElementById('profilePicture');

formData.append('profilePicture', fileInput.files[0]);

Čitanje podataka

Da biste iterirali kroz podatke u FormData objektu, koristite for...of petlju zajedno sa .entries() metodom:

for (let [key, value] of formData.entries()) {

  console.log(`${key}: ${value}`);

}

Slanje FormData podataka na server

FormData je idealan za slanje podataka serveru pomoću fetch API-ja. Evo jednostavnog primera:

fetch('https://example.com/api/register', {

  method: 'POST',

  body: formData, // Automatski formatiran kao multipart/form-data

})

  .then(response => response.json())

  .then(data => console.log('Uspešno registrovano:', data))

  .catch(error => console.error('Greška:', error));

Nema potrebe za ručnim postavljanjem Content-Type zaglavlja; FormData to automatski radi.

Prednosti FormData

1. Rad sa fajlovima
   
   
   FormData omogućava lako dodavanje i slanje fajlova direktno iz <input type="file"> polja.




2. Automatska serializacija
   
   
   Umesto da ručno formatirate podatke, FormData ih automatski formatira u multipart/form-data.




3. Fleksibilnost
   
   
   Lako upravljanje parovima ključeva i vrednosti, uključujući mogućnost iteracije i ažuriranja podataka.




4. Podrška za binarne podatke
   
   
   Idealan je za slanje binarnih podataka poput slika, PDF-ova ili drugih fajlova.

Primer iz prakse: Registraciona forma

Evo jednog kompletnog primera gde prikupljamo podatke iz forme i šaljemo ih serveru:

HTML Forma

<form id="registrationForm">

  <label for="username">Korisničko ime:</label>

  <input type="text" id="username" name="username" required>



  <label for="email">Email:</label>

  <input type="email" id="email" name="email" required>



  <label for="profilePicture">Profilna slika:</label>

  <input type="file" id="profilePicture" name="profilePicture">



  <button type="submit">Registruj se</button>

</form>

JavaScript Kod

document.getElementById('registrationForm').addEventListener('submit', function(event) {

  event.preventDefault(); // Sprečava reload stranice



  const form = event.target;

  const formData = new FormData(form);



  fetch('https://example.com/api/register', {

    method: 'POST',

    body: formData,

  })

    .then(response => response.json())

    .then(data => console.log('Uspešno registrovano:', data))

    .catch(error => console.error('Greška:', error));

});

Korisni saveti

• Ako želite da ručno modifikujete podatke, koristite .set(key, value) umesto .append().




• Možete proveriti da li određeni ključ postoji pomoću .has(key) metode.




• Za uklanjanje podataka koristite .delete(key).

Zaključak

FormData je moćan alat za rad sa podacima iz formi. Omogućava lako prikupljanje, manipulaciju i slanje podataka, čak i kada radite sa fajlovima. Njegova fleksibilnost i jednostavna integracija sa modernim JavaScript API-jima čine ga nezamenjivim za mnoge web aplikacije.