Validate Image Size And Display Preview Before Uploading - imo-viewer

imo-viewer is a tiny (less than 1kb)jQuery plugin for image upload that displays a live preview after you select an image from the local.

It also provides a validation functionality which validates the image size depending on the min height/width properties you specify during initialization.

How to use it:

1. Place jQuery library and the minified version of the imo-viewer plugin at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/imoViewer-min.js"></script>

2. Create an empty img tag for the image preview.

<img src="" alt="" id="image-previewer">

3. Attach the plugin to th existing file input and specify the selector of the image previewer. That's it.

<input type="file" id="file-input">

$(function () {
  $('#file-input').imoViewer({
    'preview' : '#image-previewer',
  })
});

4. Set the min width/height of the image allowed to be selected from the local.

$(function () {
  $('#file-input').imoViewer({
    'preview': '#image-previewer',
    'minWidth': 400,
    'minHeight': 300
  })
});

5. Trigger a function when the image fails to be selected.

$(function () {
  $('#file-input').imoViewer({
    'preview': '#image-previewer',
    'minWidth': 400,
    'minHeight': 300,
    'onError' : function(message,file) { // error callback
      // 'minWidth': 400,
      // 'minHeight': 300,
    },
  })
});

6. Trigger a function after an image is inserted into the file input.

$(function () {
  $('#file-input').imoViewer({
    'preview': '#image-previewer',
    'minWidth': 400,
    'minHeight': 300,
    'onSuccess' : function(element,file) { 
      // do something
     }
  })
});

---

This awesome jQuery plugin is developed by rana7cse. For more Advanced Usages, please check the demo page or visit the official website.