You can do this within your file input element -
<input type="file" id="fileInput" accept=".jpg, .jpeg, .png" multiple />
or you can use it in a script -
<input type="file" id="fileInput" multiple />
<script>
$(document).ready(function() {
$('#fileInput').on('change', function() {
var fileInput = $(this);
var files = fileInput[0].files;
if (files.length > 0) {
var validExtensions = ['jpg', 'jpeg', 'png'];
for (var i = 0; i < files.length; i++) {
var file = files[i];
var fileExtension = file.name.split('.').pop().toLowerCase();
if (validExtensions.indexOf(fileExtension) === -1) {
alert('Invalid file type: ' + file.name);
fileInput.val('');
return;
}
}
}
});
});
</script>
To use it in your block of code, I will do something like -
jQuery(document).ready(function() {
jQuery('#tenant_license').bind('change', function() {
var fileInput = this;
var file = fileInput.files[0];
var fileSize = file.size;
if (fileSize > 5000000) {
jQuery("#file_limit").html("Image needs to be less than 5 MB and .JPG or .PNG Format");
jQuery("#file_limit").css("color", "#dd4b39");
jQuery("#file_limit").val('');
jQuery("#tenant_license").val(null);
jQuery("#tenant_continue_button").css("pointer-events", "none");
return false;
}
var validExtensions = ['jpg', 'jpeg', 'png'];
var fileExtension = file.name.split('.').pop().toLowerCase();
if (validExtensions.indexOf(fileExtension) === -1) {
jQuery("#file_limit").html("Invalid file type. Please upload a .JPG or .PNG image.");
jQuery("#file_limit").css("color", "#dd4b39");
jQuery("#file_limit").val('');
jQuery("#tenant_license").val(null);
jQuery("#tenant_continue_button").css("pointer-events", "none");
return false;
}
jQuery("#file_limit").html("Image uploaded successfully.");
jQuery("#file_limit").css("color", "green");
jQuery("#tenant_continue_button").css("pointer-events", "all");
});
});