Bagaimana Cara Menghapus File dari FileList JavaScript di React?

Dibuat
·
Diperbarui
·
Dilihat17 kali
0

Saya lagi bikin fitur unggah beberapa file gambar di React yang dilengkapi dengan pratinjau gambar, setiap kartu pratinjau gambar punya tombol delete untuk menghapus file tersebut. Saya menahan objek FileList yang dikembalikan input tersebut menggunakan useState() React, bagaimana caranya menghapus File tertentu yang ada di dalam objek FileList? karena saya lihat objek tersebut tidak memiliki method untuk menghapusnya.

Ini kode yang saya gunakan, bagaimana cara melengkapi fungsi deleteFile?:

function Home() {
  const [files, setFiles] = useState<FileList>();

  const deleteFile = (fileToDelete: File) => {
    // bagaimana menanganinya?
  };

  return (
    <div>
      <input
        type="file"
        multiple
        onChange={(e) => {
          const files = e.target.files;
          if (!files) return;
          setFiles(files);
        }}
      />
      {files &&
        Array.from(files).map((file) => (
          <div key={file.name}>
            <img width="100px" src={URL.createObjectURL(file)} />
            <button type="button" onClick={() => deleteFile(file)}>
              Delete
            </button>
          </div>
        ))}
    </div>
  );
}
JavaScriptReact
1 Jawaban
0

Objek FileList memang tidak memiliki method untuk menghapus File, tapi kita bisa membuat FileList baru yang tidak mengandung File yang ingin dihapus menggunakan objek DataTransfer, seperti ini:

const deleteFile = (fileToDelete: File) => {
  setFiles((prevFiles) => {
    if (!prevFiles) return;

    const newFiles = new DataTransfer();
    const prevFilesArr = Array.from(prevFiles);

    for (const file of prevFilesArr) {
      if (file.name !== fileToDelete.name) {
        newFiles.items.add(file);
      }
    }

    return newFiles.files;
  });
};
Dibuat

Kamu tau jawabannya?

Ayo bergabung bersama lebih dari 200.000 pengguna lainnya!

Pertanyaan Terkait