Highly Customizable Image Uploader Plugin - jQuery Imagify

Imagify is a lightweight yet highly customizable image uploader with quality control, thumbnail preview, custom label and much more.

More features:

• Allows you to set the min/max dimension.
• Allows you to set the min/max image size.
• Allows you to restrict the file extension.
• Error handling.
• Works with the native file input.

How to use it:

1. Download & unzip the plugin and then include the Imagify plugin's files on the webpage which has jQuery library installed.

<link href="/path/to/imagify.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/imagify.js"></script>

2. Create a container element to hold the image uploader.

<div id="example"></div>

3. Attach the function to the container element to initialize a basic image uploader.

$(function(){
  $('#example').imagify();
});

4. Config the image uploader using the following data-OPTION attributes:

• data-min-file-size: min file size (mb)
• data-max-file-size: max file size
• data-max-width: max width (px)
• data-min-width: min width
• data-max-height: max height
• data-min-height: min height
• data-allowed-file-extensions: allowed file extensions

<div id="example"
     data-min-width="640" 
     data-min-height="960">
     ... more options here
</div>

5. You can also pass these options via JavaScript:

$('#example').imagify({

  minSize: 0,
  maxSize: 1,
  maxSizeErrorMessage: 'Imagify : Max size error !',
  minSizeErrorMessage: 'Imagify : Min size error !',

  maxWidth: 2000,
  minWidth: 1,
  maxHeight: 3000,
  minHeight: 1,
  dimensionErrorMessage: 'Imagify : Dimension error',

  allowedExt: 'jpg jpeg png',
  allowedExtErrorMessage: 'Imagify : Not allowed image extension !'
  
});

6. More customization options:

$('#example').imagify({

  // additional CSS styles
  style: 'border: 1px solid #ccc;',

  // shows image preview
  showThumb: true,

  // uses data attributes
  feedElement: true,

  // default text
  chooseText: "Choose Image",
  changeFileText: "Change Image",

  // shows image label
  showImageLabel: true

});

7. Possible events to handle the image selection & errors.

$('#example').imagify({

  onInit: function (elm) {
    // do something  
  });

  onSuccess: function (elm,source) {
    // do something   
  });

  onError: function (errorId) {
    // do something   
  });

  onDimensionError: function (file) {
    // do something   
  });

  onMinSizeError: function (file) {
    // do something   
  });

  onMaxSizeError: function (file) {
    // do something   
  });
  
  onAllowedExtError: function (file) {
    // do something   
  });

});

---

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