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.

4 CommentsClose Comments

4 Comments

  • scr888
    Posted 7 October 2018 at 7:33 PM 0Likes

    I like reading a post that will make programmers think. Also, many thanks for permitting me to comment!

  • Ilham
    Posted 13 October 2018 at 9:55 PM 0Likes

    Mantapp, work om!

  • MERENLAU
    Posted 28 March 2020 at 2:22 PM 0Likes

    halo kak.. thanks kak atas artikelnya sudah membantu dalam perkuliahan saya kali ini.. smoga kakak dapat terus berkarya dlm membuat artikel” pada website.. sukses slalu kak..

  • Khalis
    Posted 30 September 2021 at 8:34 PM 0Likes

    thanks work gan

Leave a Reply