React JS adalah salah satu alat populer untuk membangun UI pengguna dan merupakan skill yang perlu diketahui. Jika Kamu membangun sesuatu dengan React JS, cepat atau lambat kamu akan menghadapi tantangan dalam mengunggah file. Tapi tenang; menulis logika file upload di React JS sangat mudah, dan artikel ini akan menunjukkan cara melakukannya. Kita akan membahas cara mengunggah satu file dan mengunggah banyak file.

Membuat Upload Single File

Langkah 1: Import React dan Hooks

import React, { useState } from "react";

Mengimpor React dan useState hook dari React. useState digunakan untuk membuat state pada komponen React.

Langkah 2: Membuat Komponen FileUpload

const FileUpload = () => {
  // State untuk menyimpan file yang dipilih
  const [selectedFile, setSelectedFile] = useState();
  // State untuk menandai apakah file telah dipilih
  const [isFilePicked, setIsFilePicked] = useState(false);

Membuat komponen FileUpload yang merupakan komponen fungsional React. Menggunakan useState hook untuk mendefinisikan state selectedFile yang akan menyimpan file yang dipilih oleh pengguna, dan state isFilePicked untuk menandai apakah file telah dipilih atau belum.

Langkah 3: changeHandler - Mengelola Perubahan pada Input File

const changeHandler = (event) => {
  setSelectedFile(event.target.files[0]);
  setIsFilePicked(true);
};

changeHandler adalah fungsi yang dipanggil ketika terjadi perubahan pada input file. Fungsi ini mengupdate selectedFile dengan file yang dipilih dari event onChange dan mengatur isFilePicked menjadi true.

Langkah 4: handleSubmission - Mengirim Data

const handleSubmission = () => {
  const formData = new FormData();
  formData.append("source", selectedFile);

  fetch("https://httpbin.org/post", {
    method: "POST",
    body: formData,
  })
    .then((response) => response.json())
    .then((result) => {
      console.log("Success:", result);
    })
    .catch((error) => {
      console.error(error);
    });
};

handleSubmission adalah fungsi yang dipanggil saat tombol "Submit" ditekan. Fungsi ini membuat objek FormData, menambahkan file yang dipilih ke dalamnya, lalu mengirimkan data ke URL https://httpbin.org/post menggunakan metode POST melalui fetch. Hasilnya kemudian di-log ke konsol.

Langkah 5: Render UI

return (
  <div>
    <h1>Upload Single File Di React</h1>
    <input type="file" name="file" onChange={changeHandler} />
    {/* Menampilkan detail file jika sudah dipilih */}
    {isFilePicked ? (
      <div>
        <p>Nama File: {selectedFile.name}</p>
        <p>Tipe File: {selectedFile.type}</p>
        <p>Size: {selectedFile.size}</p>
      </div>
    ) : (
      <p>Pilih File Untuk Melihat Detail</p>
    )}
    <div>
      <button onClick={handleSubmission}>Submit</button>
    </div>
  </div>
);

Fungsi return merender antarmuka pengguna (UI) untuk komponen FileUpload. Terdapat elemen input dengan tipe file yang akan memicu changeHandler ketika ada perubahan. Selain itu, jika nilai isFilePicked adalah true, informasi detail dari file yang dipilih akan ditampilkan. Tombol "Submit" akan mengtrigger handleSubmission untuk mengirim file yang dipilih.

Berikut adala Kode Full :

import React, { useState } from "react";

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState();
  const [isFilePicked, setIsFilePicked] = useState(false);

  const changeHandler = (event) => {
    setSelectedFile(event.target.files[0]);
    setIsFilePicked(true);
  };

  const handleSubmission = () => {
    const formData = new FormData();

    formData.append("source", selectedFile);

    fetch(
      "https://httpbin.org/post",
      {
        method: "POST",
        body: formData,
      }
    )
      .then((response) => response.json())
      .then((result) => {
        console.log("Success:", result);
      })
      .catch((error) => {
        console.error( error);
      });
  };
  return (
    <div>
        <h1>Upload Single File Di React</h1>
      <input type="file" name="file" onChange={changeHandler} />
      {isFilePicked ? (
        <div>
          <p>Nama File: {selectedFile.name}</p>
          <p>Tipe File: {selectedFile.type}</p>
          <p>Size: {selectedFile.size}</p>
        </div>
      ) : (
        <p>Pilih File Untuk Melihat Detail</p>
      )}
      <div>
        <button onClick={handleSubmission}>Submit</button>
      </div>
    </div>
  );
};

export default FileUpload;

Membuat Upload Multiple File

Langkah 1: Import React dan Hooks

import React, { useState } from "react";

Mengimpor React dan useState hook dari React. useState digunakan untuk membuat state pada komponen React.

Langkah 2: Membuat Komponen FileUpload

const FileUpload = () => {
  // State untuk menyimpan file yang dipilih
  const [selectedFiles, setSelectedFiles] = useState([]);
  // State untuk menandai apakah file telah dipilih
  const [isFilePicked, setIsFilePicked] = useState(false);

Membuat komponen FileUpload yang merupakan komponen fungsional React. Menggunakan useState hook untuk mendefinisikan state selectedFiles yang akan menyimpan array file yang dipilih oleh pengguna, dan state isFilePicked untuk menandai apakah file telah dipilih atau belum.

Langkah 3: changeHandler - Mengelola Perubahan pada Input File

const changeHandler = (event) => {
  setSelectedFiles(event.target.files);
  setIsFilePicked(true);
};

changeHandler adalah fungsi yang dipanggil ketika terjadi perubahan pada input file. Fungsi ini mengupdate selectedFiles dengan array file yang dipilih dari event onChange dan mengatur isFilePicked menjadi true.

Langkah 4: handleSubmission - Mengirim Data

const handleSubmission = () => {
  const formData = new FormData();

  for (let i = 0; i < selectedFiles.length; i++) {
    formData.append("source", selectedFiles[i]);
  }

  fetch("https://httpbin.org/post", {
    method: "POST",
    body: formData,
  })
    .then((response) => response.json())
    .then((result) => {
      console.log("Success:", result);
    })
    .catch((error) => {
      console.error(error);
    });
};

handleSubmission adalah fungsi yang dipanggil saat tombol "Submit" ditekan. Fungsi ini membuat objek FormData, menambahkan setiap file yang dipilih ke dalamnya, lalu mengirimkan data ke URL https://httpbin.org/post menggunakan metode POST melalui fetch. Hasilnya kemudian di-log ke konsol.

Langkah 5: Render UI

return (
  <div>
    <h1>Upload Multiple File di React</h1>
    <input type="file" name="file" onChange={changeHandler} multiple />
    {/* Menampilkan jumlah file yang dipilih */}
    {isFilePicked ? (
      <div>
        <p>Jumlah File Terpilih: {selectedFiles.length}</p>
      </div>
    ) : (
      <p>Pilih File untuk Melihat Jumlah</p>
    )}
    <div>
      <button onClick={handleSubmission}>Submit</button>
    </div>
  </div>
);

Fungsi return merender UI untuk komponen FileUpload. Terdapat elemen input dengan tipe file yang mendukung pemilihan multiple file dan akan memicu changeHandler ketika ada perubahan. Selain itu, jika isFilePicked adalah true, informasi jumlah file yang dipilih akan ditampilkan. Tombol "Submit" akan memicu handleSubmission untuk mengirim file-file yang dipilih.

Kesimpulan

Dengan mengikuti artikel ini, kita akan belajar mengenai File Handling di React JS. Tutorial ini sangat berguna bagi teman-teman, cepat atau lambat teman teman harus belajar mengenai File Upload karena merupakan salah satu hal yang penting untuk dipelajari programmer, terkhusus untuk seorang Front-End Developer React JS.

Jika kalian merasa sudah mantap mempelajari File Upload dan mau mencoba di real case projek, silahkan cek tutorial ini ya Menambahkan Fitur Upload Dan Replace File Manga Di React JS.

Jangan lupa untuk follow akun sosial media kami. Semoga teman-teman enjoy dengan tutorial yang diberikan, Semangat Koding :)

#InJavascriptWeTrust