Membuat Filter Upload File pada Web

Ketika sedang mengunggah atau upload suatu file pada web, terdapat beberapa filter yang diterapkan. Filter tersebut berbeda beda tergantung dari kebutuhn web itu sendiri. Contohnya saja terdapat fitur maksimal ukuran file, maksimal panjang dan lebar file (apabila gambar), extensi yang digunakan, dan lain sebagainya. Pada kali ini, kita akan membahas cara untuk membuat filter upload tersebut menggunakan Javascript.

Ok, langsung saja saya akan menjelaskan beberapa hal terlebih dahulu. Dalam case kali ini, kita membutuhkan satu element input dengan type file dan event handling onchange untuk menjalankan proses filter file tersebut. Kita juga membutuhkan Javascript sebagai fungsi filternya pada bagian front end.

Berikut adalah contoh sederhana untuk element dengan type file. Anda dapat mempercantik dengan penggunaan CSS sesuai selera Anda.

 
<input type="file" id="upload" name="upload" onchange="upload(this);"/>
 

Pada baris code di atas, terlihat event handling onchange dengan nama function upload yang berguna untuk menjalankan fungsi yang nantinaya kita buat dengan nama upload. Kemudian untuk script Javascript, tulis pada bagian bawah element input dengan penamaan fungsi filter upload. Berikut adalah codenya:

 
//extensi file yang bisa diupload
var filenya = [".gif",".jpg",".png",".jpeg",".bmp"]; 
function upload(param) {
	//apabila type nya adalah file
	if (param.type == "file") {
		//mengambil value dari tag input tersebut
		var namafile = param.value;
		//mengambil ukuran file tersebut
		var sizenya = param.files[0].size;

		if (namafile.length > 0) {
			var validasiExt = false;

			//mengecek, apakah extensi filenya sesuai dengan yang dianjurkan
			for (var j = 0; j < filenya.length; j++) {
				var extensi = filenya[j];
				if (namafile.substr(namafile.length - extensi.length, extensi.length).toLowerCase() == extensi.toLowerCase()) {
					validasiExt = true;
					break;
				}
			}

			//jika extensi file tidak sesuai, muncul warning      
			if (!validasiExt) {
				//jika tidak valid, munculkan dialog box
				alert("extensi tidak sesuai")
				param.value = "";
			}

			//validasi ukuran file dalam byte, example 1 mega
			else if(sizenya > 1024000){
				alert("ukuran file lebih besar dari 1 Mb")
				param.value = "";
			}

			else{
				//proses code upload disini
				alert("file sukses upload");										
			}
		}
	}
}      	
 

Setelah semua sudah Anda tulis, simpan file tersbut dan silahkan buka menggunakan browser kesayangan Anda. Apabila berhasil, maka hasilnya sebagai berikut :

See the Pen
Filter Upload File Javascript by codenya.com (@codenyacom)
on CodePen.

 
Nah, mudah sekali bukan? Anda dapaet berkreasi untuk menambahakna filter apa saja yang Anda inginkan. Demikianlah artikel mengenai Membuat Filter Upload File pada Web. Semoga bermanfaat untuk Anda. Terima Kasih.