Bagaimana cara membuat Pengunggah File JavaScript?

Mengunggah file adalah fitur dasar dari sebagian besar proyek web saat ini. Misalnya, situs web modern dan aplikasi web 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 mengupload video dan gambar produk. Meskipun membuat pengunggah file dapat menjadi tantangan, saat ini, beberapa alat dan pustaka pihak ketiga telah tersedia yang membantu menerapkan fitur pengunggahan 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 pustaka eksternal apa pun.

Apa Fitur Pengunggah File?

Saat membangun pengunggah file, kita perlu membuat tombol unggah file front-end yang akan memungkinkan pengguna mengunggah file yang diinginkan ke situs web atau aplikasi web. Kami juga dapat mengizinkan beberapa unggahan file dan menampilkan bilah kemajuan untuk pengalaman pengguna yang lebih baik. Selain itu, kita 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 besar, sehingga pengunggah menjadi lambat. Untuk alasan ini, sebaiknya unggah file besar ke server dalam potongan untuk mencegah kesalahan dan meningkatkan kecepatan. Potongan file ini lebih mudah dikelola daripada satu file besar.

Selain itu, pengembang harus membuat pengunggah file yang 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. Kami akan mulai dengan membuat folder baru untuk proyek:

mkdir fileupload-layanan

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

Terakhir, kami akan membuat server HTTP yang akan berjalan di port 8080

Langkah 2: Membuat Front-End Pengunggah File JavaScript

Untuk membuat ujung depan pengunggah file JavaScript kami, kami akan membuat file HTML dasar yang akan menampilkan tombol unggah file dan menerima input file dari pengguna. Kami juga akan menampilkan status unggahan file. Setelah pengguna mengklik tombol, 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 mengirim file ini dari backend:

Langkah 3: Membaca File yang Diunggah Di Ujung Depan

Untuk membaca konten file di ujung depan, kami akan menggunakan objek 'FileReader'. Ini memungkinkan aplikasi web untuk membaca konten file (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. Kami bahkan dapat membaca file sebagai URL data. Di sini, kita akan menggunakan metode array untuk membaca file:

File yang dipilih dapat diakses di bawah bidang 'file' untuk input:

Objek 'FileReader' juga menyediakan beberapa event listener, seperti 'onprogress' dan 'onload', untuk melacak pembacaan file yang diunggah di bagian depan. Di sini, kita akan menggunakan event 'onload':

Langkah 4: Mengirim File Yang Diunggah Ke Backend

Sebelum kita mengirim file yang diunggah oleh pengguna ke backend, sebaiknya bagi menjadi potongan-potongan kecil atau potongan-potongan kecil dan kirimkan potongan file secara berkala, terutama jika ukuran file 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, yang 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 mengirim potongan agar 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 potongan dan menyimpannya di server.

Itu dia. Kami sekarang memiliki pengunggah file tunggal lengkap untuk pengunggahan file Javascript. Kami juga dapat mengaktifkan beberapa unggahan file dengan menggunakan opsi 'multiple':

<input type=”file” id=”files” multiple>

Kami akan memecah setiap file menjadi potongan 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 pengunggah file pihak ketiga, seperti pustaka JavaScript atau API pengunggahan file, untuk mengimplementasikan pengunggahan file JavaScript dengan cepat ke dalam aplikasi kita. Namun, Anda juga dapat membuat pengunggah file dari awal seperti yang Anda inginkan. 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.