validpic.js's Introduction

validPic.js

Javascript image validator based on mimetypes.

Introduction

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.

Install using bower or npm

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

Usage

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

Example

<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>');
});

Recommend Projects