Filter file tertentu saat upload hanya dengan html murni

Saat menggunakan aplikasi online seperti email, facebook, blog sering kita jumpai fasilitas untuk upload file. Jenis file yang dapat di upload pun tidak sembarang file, mereka memberikan filter untuk file-file tertentu.

Sekarang kita akan mencoba membahas bagaimana filter itu bekerja terutama pada sisi klien yaitu pengguna seperti kita. Pada umumnya aplikasi online seperti facebook akan membuat dua lingkaran filter untuk proses upload ini, yaitu pada sisi klien dan pada sisi server. Pada sisi klien dapat dilakukan dengan beragam cara, bisa menggunakan javascript/jQuery maupun dengan cara simple seperti filter html.

Pembahasan ini hanya seputar filter upload file tertentu yang terlihat dengan menggunakan attribut accept untuk elemen input.

Yang pertama hanya file gambar yang muncul saat tombol browse diklik dan menampilkan isi file dari localdisk. Pada elemen input tambahkan atribut accept dengan value image/*

Hanya akan menampilkan file gambar (image/*)

image/*

<input type="file" accept="image/*" />

Yang kedua digunakan untuk memfilter file jenis video. Pada elemen input tambahkan atribut accept dengan value video/*

Hanya menampilkan file video (video/*)

video/*

<input type="file" accept="video/*" />

Selanjutnya yang ini untuk memfilter file berjenis audio seperti .mp3 .aac .aif .wav dkk. Pada elemen input tambahkan atribut accept dengan value audio/*

Hanya menampilkan file audio (audio/*)

audio/*

<input type="file" accept="audio/*" />

Untuk filter ganda juga dapat dilakukan dengan cara ini, misal anda hanya ingin menampilkan file gambar dan file video saja, maka penulisan format seperti di atas dipisahkan dengan koma. Pada elemen input tambahkan atribut accept dengan value "image/*, video/*"

Hanya menampilkan file jenis gambar dan video (image/*, video/*)

audio/*

<input type="file" accept="image/*, video/*" />

Kasus selanjutnya misalkan anda ingin filter bekerja hanya pada file yang memiliki ekstensi .jpg dan file jenis audio saja. Seperti di atas pada elemen input tambahkan atribut accept dengan value ".jpg, audio/*"

Hanya menampilkan file berekstensi .jpg dan audio (image/*, video/*)

audio/*

<input type="file" accept=".jpg, audio/*" />

Gimana sob? cukup simpel kan?

Namun meskipun mudah dan simpel, untuk masalah keamanan metode ini masih kurang aman, karena hanya bekerja di sisi klien dan bagi mereka yang mengerti tentang html maka akan sangat mudah memanipulasi filter ini, sehingga file yang tidak kita ijinkan dapat memasuki sistem kita.

Solusinya dengan menggunakan pengecekan ganda, pada sisi klien dengan metode ini dan sisi server dapat dilakukan pengecekan menggunakan PHP.

Terlepas dari itu metode ini dapat menjadi solusi jitu untuk masalah filter file untuk proses upload.

referensi: stackoverflow