Validasi Ekstensi File Menggunakan JavaScript

Validasi Ekstensi File Menggunakan Javascript – Validasi tipe file sebelum mengunggah ke server adalah hal yang wajib dilakukan dalam aplikasi web. Hal ini membantu memastikan bahwa pengguna memilih jenis file yang benar untuk diunggah. Validasi sisi klien lebih user-friendly daripada sisi server. Dengan menggunakan JavaScript, kita dapat dengan mudah memeriksa ekstensi file yang dipilih oleh pengguna.

Dalam artikel ini, kita akan membaut function yang berguna untuk validasi ekstensi file dalam JavaScript.  Jika ekstensi file yang dipilih tidak cocok dengan jenis yang ditentukan, pesan peringatan akan ditampilkan kepada pengguna. Jika tidak, preview gambar yang dipilih akan ditampilkan di bawah bidang input file. Contoh kali ini, kita akan membuat form input dimana hanya file jenis .jpg, .jpeg, .png, dan .gif yang akan diizinkan.

Baca juga: Cara Membuat Function pada Javascript.

Validasi Ekstensi File Menggunakan JavaScript

Fungsi validasiEkstensi() berisi kode yang akan mem-filter ekstensi yang dipilih pengguna.

function validasiEkstensi(){
    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{
        // Preview gambar
        if (inputFile.files && inputFile.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').innerHTML = '<img src="'+e.target.result+'" style="height:300px"/>';
            };
            reader.readAsDataURL(inputFile.files[0]);
        }
    }
}

Ekstensi file yang diizinkan sudah didefinisikan dalam variabel ekstensiOk. Jika kalian ingin memvalidasi jenis file lainnya, ubah regex dengan ekstensi yang diizinkan.

Membuat Preview Gambar

Setelah menerapkan kode diatas fungsi validasiEkstensi() akan dieksekusi. Jika jenis file diizinkan, preview gambar akan ditampilkan di div preview.

<input type="file" id="file" onchange="return validasiEkstensi()"/>
<div id="preview"></div>

Untuk demo nya, silahkan lihat dibawah ini;

Kalian hanya perlu menentukan ekstensi file yang diizinkan pada variabel ekstensiOk. Selain validasi tipe file, script ini akan membantu menampilkan pratinjau gambar tanpa mengunggah menggunakan JavaScript. Sekian artikel singkat kali ini, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.