Cara Validasi File Menggunakan Javascript

Javascript – Salah satu cara untuk membuat website kita aman yaitu dengan memberi batasan saat melakukan unggah data, karena jika tidak diberi batasan maka user dapat melakukan upload sembarangan misalnya upload virus yang akan merusak database maupun aplikasi web kita.

Untuk memberikan batasan, kita bisa menambahkan validasi jenis ekstensi file yang boleh diunggah ke aplikasi web kita. Validasi yang digunakan bisa client-side ataupun server-side. Kalau di Laravel client-side ya ditampilannya sedangkan server-side di controller nya. Namun lebih baik kita memilih validasi client-side untuk mendapatkan user experience yang lebih baik.

Sebelumnya kita sudah membuat Bagaimana Cara Upload Data Menggunakan AJAX, sekarang kita akan menambahkan sedikit kode untuk memberikan batasan tipe file yang bisa diunggah.

Persiapan

Pertama yang harus disiapkan adalah kalian sudah membuat tampilannya terlebih dahulu. Kalian bisa lihat tutorial sebelumnya disini. Di bawah ini saya akan memberikan contoh tampilan untuk upload file menggunakan modal.

Dari kode di atas jika diklik submit maka fungsi “onSubmit” akan dipanggil di javascript.

Membuat Validasi File Menggunakan Javascript

Kedua, kita akan mempersiapkan validasi ekstensi file menggunakan javascript. Silahkan lihat kode javascript di bawah ini.

Berikut saya akan jelaskan berdasarkan kode di atas.

“data_file” merupakan variabel yang akan menyimpan keseluruhan informasi tentang file yang akan kita upload. Kita mengambil informasi file melalui id “file_document” yang sudah didefiniskan di form input type file.

dari variabel “data_file” kita akan mengambil nama dari filenya kemudian kita akan melakukan validasi apakah file tersebut memiliki ekstensi pdf atau tidak. Jika memiliki ekstensi pdf maka hasilnya true namun jika tidak maka false.

Kesimpulan

Setelah kalian membuat tampilan di html dan menambahkan kode untuk melakukan validasi file menggunakan javascript maka hasilnya sebagai berikut.

Validasi File

Ketika kita memilih file yang akan diupload kemudian klik submit maka javascript akan melakukan validasi file, jika tidak sesuai akan memberikan warning bahwa ekstensi file tidak sesuai yang diijinkan di aplikasi kita. Kalian juga dapat memberikan batasan lainnya seperti ukuran, untuk cara mendapatkan informasi file melalui javascript kalian bisa lihat juga disini.

Semoga apa yang saya sampaikan bermanfaat. 🙂

About the Author: ikhsan

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *