Validate Extension .jpeg,.jpg,.png,.tif,.tiff,.bmp

Question

How to Validate on button submit,

Sachin Singh · Answer

even with ejs-uploader it should work "formFileCheque" autoUpload= "false" multiple= "false" selected="onFileSelected" allowedExtensions= ".jpeg,.jpg,.png,.tif,.tiff,.bmp" maxFileSize= "40000000" > "imagePreview" > function onFileSelected () { var fileInput = document.getElementById( ' formFileCheque ' ); var filePath = fileInput.value; // Allowing file type var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i; if (!allowedExtensions.exec(filePath)) { alert( 'Invalid file type' ); fileInput.value = '' ; return false ; } else { // Image preview if (fileInput.files && fileInput.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById( 'imagePreview' ).innerHTML = ' + e.target.result + '"/>' ; }; reader.readAsDataURL(fileInput.files[0]); } } }

Sachin Singh · Answer

This is what we do in general with JS "file" id= "file" onchange= "return fileValidation()" /> "imagePreview" > function fileValidation() { var fileInput = document.getElementById( 'file' ); var filePath = fileInput.value; // Allowing file type var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i; if (!allowedExtensions.exec(filePath)) { alert( 'Invalid file type' ); fileInput.value = '' ; return false ; } else { // Image preview if (fileInput.files && fileInput.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById( 'imagePreview' ).innerHTML = ' + e.target.result + '"/>' ; }; reader.readAsDataURL(fileInput.files[0]); } } }

Mithun Pradhan · Answer

Save button click to validate

Mithun Pradhan · Answer

ejs-uploader not input field

Vikas Panwar · Answer

$('INPUT[type="file"]').change(function () { var ext = this.value.match(/\.(.+)$/)[1]; switch (ext) { case 'jpg': case 'jpeg': case 'png': case 'gif': $('#uploadButton').attr('disabled', false); break; default: alert('This is not an allowed file type.'); this.value = ''; }}); For the front-end it is good convenient to put 'accept' attribute like as. accept="image/jpg,image/png,image/jpeg,image/gif" />