Untuk melakukan validasi file di sisi client (sebelum submit) menggunakan jQuery, kamu bisa memanfaatkan API files bawaan browser yang diakses melalui selector jQuery. Bagi para web developers hal ini sangat membantu sekali dalam penerapan javascript khususnya.

Berikut adalah cara praktis untuk mengecek tipe file (MIME type) dan ukurannya:

Kode Implementasi

Pastikan kamu sudah memanggil library jQuery di file HTML kamu.JavaScript

$(document).ready(function() {
    $('#fileInput').on('change', function() {
        // Ambil data file pertama
        const file = this.files[0];
        const fileType = file.type;
        const fileSize = file.size; // dalam bytes
        const limitSize = 2 * 1024 * 1024; // 2 MB

        // 1. Validasi Tipe File (harus PDF)
        if (fileType !== 'application/pdf') {
            alert('Waduh, cuma boleh file PDF aja nih!');
            $(this).val(''); // Reset input file
            return false;
        }

        // 2. Validasi Ukuran File (max 2MB)
        if (fileSize > limitSize) {
            alert('Kegedean bro! Maksimal file cuma 2 MB.');
            $(this).val(''); // Reset input file
            return false;
        }

        console.log('File aman, siap di-submit!');
    });
});

---

Penjelasan Singkat

• this.files[0]: Karena input file bisa mendukung multiple, kita ambil indeks pertama untuk input tunggal.
• file.type: Digunakan untuk mengecek MIME type. Untuk PDF, nilainya adalah application/pdf.
• file.size: Ukuran file dihitung dalam satuan Byte. Jadi untuk 2 MB, perhitungannya adalah $2 \times 1024 \times 1024$.
• $(this).val(''): Ini penting supaya inputan di-reset jika tidak valid. Kalau tidak di-reset, user masih bisa memaksakan submit file yang salah tadi.

Tips Tambahan (UX)

Agar user tidak bingung dari awal, tambahkan atribut accept pada tag HTML kamu. Ini akan memfilter file di jendela pemilihan dokumen secara otomatis, meskipun validasi JavaScript di atas tetap wajib ada untuk keamanan.HTML

<input type="file" id="fileInput" accept="application/pdf">

Gimana sudah kebayangkan? Sip… lanjutkan explorasi dan implementasinya di web system terus yaa…!