Membuat Drag and Drop File Component di React JS

credit: https://www.metaltoad.com/

Di setiap tempat kerja, saya selalu belajar banyak hal baru. Baik hal yang sebelumnya sudah saya ketahui, namun tidak saya pelajari lebih lanjut maupun hal yang benar-benar baru. Terkadang mempelajari dan menguasai hal baru itu tidak cukup. Kita selain harus benar-benar paham dan mempraktekannya, kita juga harus mendokumentasikannya karena terbatasnya memori dalam otak manusia. Tulisan ini pun juga tidak berbeda, tujuan saya adalah mendokumentasikan apa yang telah saya pelajari di tempat kerja saya yaitu membuat komponen drag and drop file di React JS.

Bagi saya yang sejak jaman bootcamp yang orangnya “tukang install package”, ini adalah hal yang bukan kepalang main membuat saya heran kenapa saya tidak bisa membuat komponen semacam ini sebelumnya karena membuatnya tidak susah! Dulu agar deadline dapat terpenuhi saat saya masih ikut bootcamp dan di tempat kerja pertama saya, saya lebih suka install package yang dibuat oleh orang lain, namun di tempat kerja yang sekarang, saya dituntut untuk membuat komponen sendiri agar aplikasi yang dibuat lebih ringan, tidak bergantung pada package orang lain yang mungkin sudah tidak diurus oleh yang punyanya, serta agar saya dapat meningkatkan kemampuan saya di front end development.

Jika anda ingin melihat hasilnya, saya sudah menaruh di github yang bisa dilihat di sini, namun apabila ingin membuat step by step saya akan menjelaskannya dibawah ini. Selamat membaca!

Step by Step

Pertama saya akan menjelaskan requirement untuk komponen ini:

1. Komponen dapat menerima segala bentuk file gambar dan hanya file gambar saja.
2. Sebuah file gambar maksimal berukuran 2MB.
3. Hanya dapat menerima 5 file saja.
4. Jika sudah ada 5 file, maka tombol upload akan ter-disable dan tidak menerima file lagi lewat drag and drop.

Disini saya menggunakan React JS dengan Typescript, tapi code ini dapat berjalan di React JS dengan Javascript juga.

Langkah pertama untuk membuat komponennya adalah meng-import useState dan membuat dua state untuk menampung preview gambar yang telah dipilih dan menampung data file yang telah dipilih seperti nama file, ukuran file, dan lainnya. Disini kedua statenya saya namakan previewImage dan fileInfos.

State file infos dapat berguna apabila anda ingin menampilkan nama file, ukuran file, serta attribute file lainnya.

Selanjutnya kita membuat fungsi untuk mengecek apakah file yang dipilih merupakan file gambar atau bukan.

fungsi akan mengembalikan true apabila filenya adalah gambar dan false jika tidak.

Lalu kita juga perlu mengecek apabila file yang telah dipilih sudah ada 5 atau belum dengan mengecek panjang array previewImage atau fileInfos karena nantinya file yang valid akan ditaruh disana. Disini saya mengecek dari state previewImage.

variable ini akan mereturn boolean (true atau false).

Kemudian kita akan membuat fungsi untuk memvalidasi file yang telah kita pilih dalam drag and drop atau input kita.

Kita akan mengecek untuk file duplikat, file yang ukurannya lebih dari 2 MB, file gambar yang valid, dan kondisi apabila file yang sedang dipilih dan yang telah dipilih jumlahnya sudah 5 atau lebih.

Apabila ada file yang tidak valid, maka kita akan munculkan alert juga.

Setelah membuat fungsi untuk memvalidasi file, kita akan membuat fungsi untuk menghapus file yang telah kita pilih.

Menggunakan filter untuk menyaring nama file di state previewImage dan index file yang akan dihapus di state fileInfos.

Berikutnya kita pasangkan fungsi yang telah kita buat pada onDrop container komponen dan pada onDragOver kita pasangkan preventDefault.

Gunakan preventDefault() agar laman tidak merefresh saat kita melakukan drag and drop.

Kemudian kita membuat label dan input type file untuk membuat pilihan bagi user yang tidak dapat melakukan drag and drop seperti user yang mengakses dari smartphone.

Gunakan htmlFor pada label dan display:none pada input agar tampilan lebih rapi.

Terakhir, kita buat container preview gambar yang telah kita pilih serta tombol untuk menghapus file yang kita pilih.

Jika sudah sampai langkah terakhir, kita akan coba aplikasinya.

Tampilan awal aplikasi.

Saya memilih 4 gambar yang nantinya akan ditampilkan di aplikasinya.

Setelah itu saya akan menambahkan satu gambar lewat drag and drop.

File berhasil dimasukkan.

Untuk menghapus gambar, kita hanya perlu menekan tombol X yang sudah dibuat sebelumnya. Disini saya menghapus gambar yang tengah.

Gambar yang tengah berhasil terhapus.

Dan apabila saya memasukkan dua gambar baru, akan muncul alert yang memberitahu jika saya sudah melewati batas jumlah file yaitu 5.

Lalu saya coba memasukkan file video dan akan keluar alert juga.

Terakhir saya akan masukkan file yang ukurannya lebih besar dari 2 MB.

Dan muncul alert yang memberitahukan bahwa file yang dipilih ukurannya lebih dari 2 MB.

What’s Next?

Setelah selesai membuatnya, anda dapat memberi style dan user experience yang lebih baik. Selain itu, anda dapat menggunakan alert yang lebih baik seperti SweetAlert, ketimbang menggunakan alert bawaan browser.

Anda juga dapat menambahkan validasi yang lebih baik lagi selain sekadar mengecek apakah file sudah valid atau jumlah file yang dipilih sudah cukup atau belum.

Conclusion

Membuat komponen drag and drop file di React JS itu mudah! Kita bisa memanfaatkan onDrop dan onDragOver pada React JS. Selain itu kita juga bisa memanfaatkan useState untuk melakukan preview pada gambar yang telah dipilih dan juga melakukan validasi terhadap attribute file yang telah kita pilih.

Saya harap tulisan ini dapat bermanfaat untuk orang lain selain saya. Sampai jumpa lain waktu!