Javascript image validator based on mimetypes.
Tired of not finding any library to validate images on the client side I decided to create one for my own use and anybody else who want to save some time doing it. Yeah, we all know client side validation is just one of the many steps and we should never rely only on it, but hey! It helps, not only us but also users!
This library makes use of the magic numbers to detect different mimetypes, thefore even when the mimetype is mnodifed we can still figure out it it is what it claims to be.
Optionally, you can install fullPage.js with bower or npm if you prefer: Terminal
// With bower
bower install validpic.js
// With npm
npm install validpic.js
Valid image types at the moment are: png
, jpg
, gif
, bmp
.
- Include the script before the closing
</body>
tag. - Use the class
valid-pic
in any input you want to validate. - Use the the custom events to manage errors in your own way
<div>
<input type="file" id="add-image" class="valid-pic" />
</div>
###Using javascript
document.getElementById('add-image').addEventListener("error", function(){
console.log("Invalid image - javascript custom event");
//do whatever here
}, false);
###Using jQuery
$('.valid-pic').on('error', function(e){
var data = e.originalEvent.detail;
console.log(data);
console.log("Invalid image - jQuery custom event");
$(data.input).css('background', 'red');
$(data.input).after('<span class="error-message">Invalid image type!</div>');
});