Bagaimana cara membuat Pengunggah File JavaScript?

Pengunggahan file adalah fitur dasar dari sebagian besar proyek web saat ini. Misalnya, situs web dan aplikasi web modern seperti Facebook, LinkedIn, Twitter, Coursera, dan banyak lagi memungkinkan pengguna akhir mengunggah file, seperti gambar, dokumen, video, dll. Selain itu, alat online seperti alat pengeditan gambar, pemeriksa plagiarisme, dan konverter PDF-ke-Word juga memungkinkan pengguna mengunggah file. Terkadang, tim internal memerlukan fitur upload file untuk mengunggah video dan gambar produk. Meskipun membuat pengunggah file bisa jadi menantang, saat ini ada beberapa tantangan alat pihak ketiga dan perpustakaan tersedia yang membantu mengimplementasikan fitur unggah file dengan cepat ke dalam proyek Anda. Namun, jika Anda ingin membuat pengunggah file, lebih khusus lagi, pengunggah JavaScript, dari awal, artikel ini adalah tempat yang tepat.

Pada artikel ini, kami akan menunjukkan cara membuat pengunggah file JavaScript dengan JavaScript vanilla atau JavaScript murni tanpa menggunakan perpustakaan eksternal apa pun.

Apa Saja Fitur Pengunggah File?

Saat membuat pengunggah file, kita perlu membuat tombol unggah file front-end yang memungkinkan pengguna mengunggah file yang diinginkan ke situs web atau aplikasi web. Kami juga dapat mengizinkan banyak unggahan file dan menampilkan bilah kemajuan untuk pengalaman pengguna yang lebih baik. Selain itu, kami juga harus menampilkan pratinjau gambar saat pengguna mengunggah file gambar. Setelah file diunggah, kita perlu membacanya, mengirimkannya ke backend, dan menyimpannya di server. Terkadang, pengguna mengunggah file berukuran besar, sehingga mengakibatkan pengunggahan menjadi lambat. Oleh karena itu, yang terbaik adalah mengunggah file besar ke server dalam beberapa bagian untuk mencegah kesalahan dan meningkatkan kecepatan. Potongan file ini lebih mudah dikelola daripada satu file besar.

Selain itu, pengembang harus membuat pengunggah file efisien yang mendukung pengunggahan cepat. Anda juga perlu memastikan pengunggah file aman untuk mencegah penyerang dunia maya menyebarkan malware dan virus ke server Anda.

Bagaimana Cara Membuat Pengunggah File JavaScript?

Langkah 1: Menyiapkan Sisi Server

Kami akan menggunakan paket HTTP bawaan untuk menyiapkan server Node.js. Kita akan mulai dengan membuat folder baru untuk proyek tersebut:

layanan unggah file mkdir

Selanjutnya, kita akan membuat file index.js. Ini akan menjadi titik masuk server kami.

Terakhir, kita akan membuat server HTTP yang akan berjalan pada port 8080

Langkah 2: Membuat Front-End Pengunggah File JavaScript

Untuk membuat bagian depan pengunggah file JavaScript, kami akan membuat file HTML dasar yang akan menampilkan tombol unggah file dan menerima masukan file dari pengguna. Kami juga akan menampilkan status unggahan file. Setelah pengguna mengklik tombol tersebut, proses pengunggahan file akan dimulai.

Saat kami membuat tombol unggah file sederhana, Anda juga dapat mengedit teks tombol atau mengubah warna tombol untuk tujuan desain.

Selanjutnya, kami akan mengirimkan file ini dari backend:

Langkah 3: Membaca File yang Diunggah Di Bagian Depan

Untuk membaca konten file di front end, kita akan menggunakan objek 'FileReader'. Ini memungkinkan aplikasi web membaca konten file (yang disimpan di sistem pengguna) secara asinkron. Objek 'FileReader' menawarkan beberapa metode untuk membaca file. Misalnya, kita dapat membaca file yang diunggah sebagai buffer array atau dalam data biner mentah. Kita bahkan dapat membaca file tersebut sebagai URL data. Di sini, kita akan menggunakan metode array untuk membaca file:

File yang dipilih dapat diakses di kolom 'file' untuk input:

Objek 'FileReader' juga menyediakan beberapa event pendengar, seperti 'onprogress' dan 'onload', untuk melacak pembacaan file yang diunggah di front end. Di sini, kita akan menggunakan acara 'onload':

Langkah 4: Mengirim File yang Diunggah ke Backend

Sebelum kita mengirim file yang diunggah oleh pengguna ke backend, sebaiknya kita membaginya menjadi potongan-potongan kecil atau bagian-bagian dan mengirimkan potongan-potongan file tersebut secara berkala, terutama jika ukuran filenya besar. Ini karena mengunggah file yang sangat besar dapat menyebabkan masalah terkait latensi dan kecepatan. Selain itu, terkadang penyerang dunia maya juga mengunggah file yang terlalu besar, sehingga dapat menyebabkan server tidak berfungsi.

Jadi, pertama-tama kita akan membagi file menjadi beberapa bagian dan mengirimkannya ke backend satu per satu. Kami juga perlu memastikan bahwa kami mengirimkan potongannya secara berurutan sehingga file tidak rusak. Kami juga akan menggunakan 'async menunggu' sehingga kami tidak membebani server dengan permintaan.

Langkah 5: Menyimpan Potongan File Di Server

Terakhir, kami akan menerima potongannya dan menyimpannya di server.

Itu dia. Kami sekarang memiliki pengunggah file tunggal yang lengkap untuk mengunggah file Javascript. Kami juga dapat mengaktifkan unggahan banyak file dengan menggunakan opsi 'banyak':

Kami akan memecah setiap file menjadi beberapa bagian satu per satu dan mengirimkannya ke backend.

Kesimpulan

Pengunggahan file adalah fitur penting dari banyak aplikasi web dan situs web modern. Kita dapat menggunakan alat pengunggahan file pihak ketiga, seperti perpustakaan JavaScript atau API pengunggahan file, untuk dengan cepat mengimplementasikan pengunggahan file JavaScript ke dalam aplikasi kita. Namun, Anda juga dapat membuat pengunggah file dari awal sesuai keinginan. Misalnya, Anda dapat membagi file besar menjadi beberapa bagian dan mengirimkannya ke backend satu per satu. Pada artikel ini, kami telah membuat pengunggah file JavaScript dengan Vanilla JS dari awal.