JavaScript Academy · Pelajaran

Mengunggah File dengan Fetch

Kirim file ke server dengan FormData.

Mengunggah File dengan Fetch adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Mengunggah dengan fetch

Untuk mengirim berkas ke server, Anda melakukan POST dengan isi FormData menggunakan fetch. Peramban menangani pengodean multipart/form-data untuk Anda, termasuk isi berkas.

Membuat FormData

Kumpulkan berkas dari masukan dan tambahkan berkas tersebut, bersama kolom lainnya, ke objek FormData.

const file = document.querySelector('#picker').files[0];
const data = new FormData();
data.append('avatar', file);
data.append('userId', '42');

console.log(data.has('avatar'));

POST Dasar

Teruskan FormData sebagai body dari POST fetch. Responsnya adalah Promise yang dapat Anda tunggu.

async function upload(data) {
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: data
  });
  console.log(response.status);
}

Jangan Menetapkan Content-Type

Kesalahan umum: menetapkan Content-Type secara manual. Biarkan peramban menetapkannya, karena peramban harus menyertakan string batas multipart. Menetapkannya sendiri akan merusak unggahan.

const response = await fetch('/api/upload', {
  method: 'POST',
  body: formData
});

console.log('browser added the boundary automatically');

Membaca Respons

Periksa response.ok dan uraikan isi respons, yang sering kali berupa JSON, setelah unggahan berhasil.

async function upload(data) {
  const response = await fetch('/api/upload', { method: 'POST', body: data });
  if (!response.ok) {
    throw new Error('upload failed: ' + response.status);
  }
  const result = await response.json();
  console.log(result);
}

Menangani Kesalahan

Bungkus pemanggilan dalam try/catch. Perhatikan bahwa fetch hanya menolak saat terjadi kegagalan jaringan, jadi Anda harus memeriksa response.ok untuk status kesalahan HTTP.

async function upload(data) {
  try {
    const res = await fetch('/api/upload', { method: 'POST', body: data });
    if (!res.ok) throw new Error('HTTP ' + res.status);
    console.log('uploaded');
  } catch (err) {
    console.log('error:', err.message);
  }
}

Mengunggah Beberapa Berkas

Tambahkan beberapa berkas dengan kunci yang sama menggunakan append, atau lakukan perulangan pada daftar berkas untuk menambahkan semuanya.

const files = document.querySelector('#picker').files;
const data = new FormData();
for (const file of files) {
  data.append('photos', file);
}

console.log(data.getAll('photos').length + ' files queued');

Menambahkan Header seperti Auth

Anda dapat menambahkan header seperti Authorization, tetapi bukan Content-Type. Isinya tetap berupa FormData.

const response = await fetch('/api/upload', {
  method: 'POST',
  headers: { Authorization: 'Bearer token123' },
  body: formData
});

console.log(response.status);

Mengirim Blob yang Dihasilkan

Anda dapat mengunggah data yang dibuat di peramban, bukan hanya berkas yang dipilih. Tambahkan Blob dengan nama berkas untuk mengirim dokumen yang dihasilkan.

const blob = new Blob([JSON.stringify({ ok: true })], {
  type: 'application/json'
});
const data = new FormData();
data.append('report', blob, 'report.json');

await fetch('/api/upload', { method: 'POST', body: data });
console.log('generated file sent');

Membatalkan Unggahan

Gunakan AbortController untuk membatalkan unggahan yang lambat, misalnya ketika pengguna berpindah halaman.

const controller = new AbortController();
fetch('/api/upload', {
  method: 'POST',
  body: formData,
  signal: controller.signal
}).catch(e => console.log(e.name));

controller.abort();

Mengapa Ini Penting

Menggabungkan FormData dengan fetch adalah cara modern dan standar untuk mengunggah berkas: tambahkan kolom dan berkas, lakukan POST terhadap FormData, lalu biarkan peramban mengodekan multipart dengan batas yang benar. Hindari menetapkan Content-Type, selalu periksa response.ok, dan bersihkan sumber daya.

async function submitForm(formEl) {
  const data = new FormData(formEl);
  const res = await fetch('/submit', { method: 'POST', body: data });
  console.log('status', res.status);
}

Pemeriksaan Singkat

Mengapa Anda sebaiknya NOT menetapkan header Content-Type secara manual saat melakukan POST FormData dengan fetch?

Ringkasan: Mengunggah Berkas dengan fetch

Anda telah mempelajari cara mengirim berkas ke server:

Tambahkan berkas dan kolom ke FormData, lalu teruskan sebagai body fetch.
Jangan pernah menetapkan Content-Type secara manual; peramban menambahkan batas multipart.
Periksa response.ok karena fetch hanya menolak saat terjadi kesalahan jaringan.
Anda dapat mengirim beberapa berkas, Blob yang dihasilkan, dan membatalkan unggahan dengan AbortController.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengunggah File dengan Fetch” gratis?

Ya — teks lengkap “Mengunggah File dengan Fetch” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengunggah File dengan Fetch”?

Kirim file ke server dengan FormData. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Mengunggah File dengan Fetch” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy