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', 'jelena@example.com');

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.