Jumat, April 04, 2025

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.

Tidak ada komentar:

Posting Komentar

PHP Google Drive

https://g.co/gemini/share/4ec33b801d4a   Tentu, saya akan membantu Anda membuat kode PHP menggunakan Composer untuk melakukan sinkronisasi (...