Javscript FETCH upload File

 Tentu, berikut adalah contoh kode JavaScript fetch untuk mengunggah file, mengirim header, dan variabel POST:

JavaScript

async function uploadFile(file, url, headers, postData) {
  const formData = new FormData();
  formData.append('file', file); // 'file' adalah nama field di sisi server

  // Tambahkan variabel POST ke FormData
  for (const key in postData) {
    formData.append(key, postData[key]);
  }

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: headers,
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result = await response.json(); // Atau response.text(), tergantung respons server
    return result;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Contoh penggunaan:
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', async () => {
  const file = fileInput.files[0];
  const url = '/upload'; // Ganti dengan URL upload Anda
  const headers = {
    'Authorization': 'Bearer token_anda', // Contoh header otorisasi
  };
  const postData = {
    'nama': 'contoh_nama',
    'deskripsi': 'contoh_deskripsi',
  };

  try {
    const result = await uploadFile(file, url, headers, postData);
    console.log('Upload berhasil:', result);
    // Lakukan sesuatu dengan hasil upload
  } catch (error) {
    console.error('Upload gagal:', error);
    // Tangani error upload
  }
});

Penjelasan:

1. Fungsi uploadFile:
   • Menerima file, url, headers, dan postData sebagai argumen.
   • Membuat objek FormData untuk menampung file dan variabel POST.
   • Menggunakan fetch untuk mengirim permintaan POST ke url.
   • Menangani respons dan error.
   • Mengembalikan hasil respons dari server.
2. Penggunaan FormData:
   • FormData digunakan untuk mengirim data multipart/form-data, yang diperlukan untuk mengunggah file.
   • formData.append('file', file) menambahkan file ke FormData. Nama 'file' harus sesuai dengan nama field yang diharapkan oleh server.
   • melakukan looping pada objek postData untuk menambahkan variabel POST lain nya.
3. Pengaturan Header:
   • Objek headers digunakan untuk menambahkan header HTTP, seperti Authorization.
4. Penanganan Respons:
   • response.ok digunakan untuk memeriksa apakah respons HTTP berhasil.
   • response.json() digunakan untuk mengurai respons JSON dari server. Sesuaikan dengan format respons server Anda.
5. Penanganan Error:
   • Blok try...catch digunakan untuk menangani error yang mungkin terjadi selama proses upload.
6. Contoh Penggunaan:
   • Kode contoh menunjukkan cara mendapatkan file dari input file, mengatur URL, header, dan variabel POST.
   • Memanggil fungsi uploadFile dan menangani hasil upload atau error.

Catatan Penting:

• Pastikan URL upload (/upload dalam contoh) sesuai dengan endpoint server Anda.
• Sesuaikan nama field file ('file' dalam contoh) dengan yang diharapkan oleh server.
• Tangani error dan respons server dengan tepat sesuai kebutuhan aplikasi Anda.
• Pada contoh diatas, terdapat penambahan header authorization. Header authorization ini sering digunakan untuk pengamanan pada API. Jika API yang dituju tidak memerlukan header authorization, maka bagian header dapat dihilangkan.
• Pada contoh diatas, untuk mengambil file dari input type file, digunakan document.getElementById('fileInput'). Pastikan tag input pada html memiliki id="fileInput".
• Pastikan server Anda dikonfigurasi untuk menerima upload file dan menangani variabel POST.

berikut adalah contoh kode JavaScript fetch untuk mengunggah beberapa file sekaligus, mengirim header, dan variabel POST:

JavaScript

async function uploadFiles(files, url, headers, postData) {
  const formData = new FormData();

  // Tambahkan setiap file ke FormData
  for (let i = 0; i < files.length; i++) {
    formData.append('files[]', files[i]); // 'files[]' adalah nama field untuk array file di sisi server
  }

  // Tambahkan variabel POST ke FormData
  for (const key in postData) {
    formData.append(key, postData[key]);
  }

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: headers,
      body: formData,
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const result = await response.json(); // Atau response.text(), tergantung respons server
    return result;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// Contoh penggunaan:
const fileInput = document.getElementById('fileInput');
const uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', async () => {
  const files = fileInput.files;
  const url = '/upload'; // Ganti dengan URL upload Anda
  const headers = {
    'Authorization': 'Bearer token_anda', // Contoh header otorisasi
  };
  const postData = {
    'nama': 'contoh_nama',
    'deskripsi': 'contoh_deskripsi',
  };

  try {
    const result = await uploadFiles(files, url, headers, postData);
    console.log('Upload berhasil:', result);
    // Lakukan sesuatu dengan hasil upload
  } catch (error) {
    console.error('Upload gagal:', error);
    // Tangani error upload
  }
});

Perubahan Utama:

1. Penggunaan files[]:

   • Pada formData.append('files[]', files[i]), files[] digunakan sebagai nama field untuk array file di sisi server. Ini memungkinkan server untuk menerima beberapa file sekaligus.

2. Iterasi File:

   • Loop for digunakan untuk mengiterasi setiap file dalam fileInput.files dan menambahkannya ke FormData.

3. Pengambilan File:

   • variable files yang menyimpan fileInput.files, yang mana akan menyimpan lebih dari satu file.

4. HTML:

   • Pastikan tag input file di HTML memiliki atribut multiple:
   HTML

   <input type="file" id="fileInput" multiple />
   

Penjelasan Tambahan:

• Perubahan utama adalah pada cara penanganan file di FormData. Dengan menggunakan files[], server dapat menerima array file, bukan hanya satu file.
• Sisanya dari kode (pengaturan header, variabel POST, penanganan respons, dan error) tetap sama.
• Pada sisi server, anda perlu melakukan perubahan pada bagian penerimaan file. Dikarenakan file dikirim dalam bentuk array, maka server perlu melakukan looping untuk setiap file yang dikirim.