Cara validasi ekstensi file dengan JavaScript

Memvalidasi ekstensi file sebelum meng-upload ke server adalah wajib saat mengupload file di aplikasi web. Ini membantu untuk memastikan bahwa pengguna telah memilih tipe file yang tepat dari file yang akan diunggah. Validasi client-side lebih user-friendly daripada server-side. Ini akan ada baiknya untuk memvalidasi tipe file sebelum dikirim untuk diupload. Menggunakan JavaScript, kita dapat dengan mudah memeriksa ekstensi file yang dipilih dengan ekstensi file yang diperbolehkan.

Dalam tutorial ini, saya akan menunjukkan bagaimana kamu dapat mengimplementasikan validasi tipe file (ekstensi) dengan JavaScript. Menggunakan validasi script yang saya buat, kamu dapat membatasi pengguna untuk meng-upload hanya jenis file yang diperbolehkan.

Dalam contoh script saya, kita akan memvalidasi file gambar menggunakan JavaScript dan memungkinkan pengguna untuk hanya memilih file .jpg, .jpeg, .png, dan .gif. Jika ekstensi file yang dipilih tidak cocok dengan ekstensi yang sudah diatur, pesan peringatan akan ditampilkan kepada pengguna. Jika tidak, pratinjau gambar yang dipilih akan ditampilkan di bawah bidang file input.

Kode JavaScript

Fungsi validasiFile() berisi kode validasi tipe file lengkap. Fungsi JavaScript ini harus dipanggil untuk memvalidasi ekstensi file. Kita akan memanggilnya di form input HTML.

function validasiFile(){
    var inputFile = document.getElementById('file');
    var pathFile = inputFile.value;
    var ekstensiOk = /(\.jpg|\.jpeg|\.png|\.gif)$/i;
    if(!ekstensiOk.exec(pathFile)){
        alert('Silakan upload file yang memiliki ekstensi .jpeg/.jpg/.png/.gif');
        inputFile.value = '';
        return false;
    }else{
        //Pratinjau gambar
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('pratinjauGambar').innerHTML = '<img src="'+e.target.result+'"/>';
            };
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
}

Regex ekstensi file gambar ditentukan dalam variabel ekstensiOk. Jika kamu ingin memvalidasi tipe file lainnya, ganti regex dengan ekstensi diperbolehkan.

Kode HTML

Saat pemilihan file, fungsi validasiFile() akan dieksekusi. Jika tipe file yang diperbolehkan dipilih, pratinjau gambar akan ditampilkan dalam <div id="pratinjauGambar"></div>

<!-- Input file -->
<input type="file" id="file" onchange="return validasiFile()"/>

<!-- Pratinjau gambar -->
<div id="pratinjauGambar"></div>

Kesimpulan

Di sini saya telah membahas cara memvalidasi file hanya untuk file gambar, kamu dapat menggunakan script ini untuk memvalidasi tipe file lainnya. Kamu hanya perlu menentukan ekstensi file yang diperbolehkan di variabel ekstensiOk dalam kode JavaScript. Terlepas dari itu, script ini akan membantu untuk menampilkan pratinjau gambar tanpa mengupload dengan menggunakan JavaScript.