soysaltan/imagify

There is no license information available for the latest version (1.2) of this package.

Imagify image upload simplifier

1.2 2019-07-28 20:37 UTC

Unknown License

• Soysal Tan

README

Imagify simplifies your image upload process, does not tire you.

Installation

Add JQuery and Imagify source files. (best practice)

 <link href="https://cdn.jsdelivr.net/gh/soysaltan/imagify@latest/imagify.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/soysaltan/imagify@latest/imagify.min.js"></script>

or

composer require soysaltan/imagify 

... and you are ready to go.

<div id="test"></div>

$("#test").imagify();

EVENTS

onInit (elm):

This event runs the first time the imafigy element is called and and returns the rendered element itself.

Example :

• Background color becomes red when the div element is rendered with imagify.

<div id="test"></div>

$('#test").imagify({
            onInit: function (elm) {
             	elm.css("background-color","red");  
});

onSuccess (elm,source):

The rendered element has been attributed with data-src key

Example :

• Log the selected image's base64 code.

$('#test").imagify({
            onSuccess: function (elm, source) {
             console.log( $("#test").attr("data-src") );
});

elm : The rendered element source : Base64 code of the selected image

onError (errorId):

Returns the errorId information for the error.

Example :

• Background color becomes red when the div element is rendered with imagify.

$('#test").imagify({
            onError: function (errorId) {
             if (errorId==$.fn.imagify.ALLOWED_EXT_ERROR) {
			 	alert('This extension is not supported !')
			 }
});

errorId : The error id of the error information. It could be :

MAX_SIZE_ERROR = 1;
DIMENSION_ERROR = 2;
MIN_SIZE_ERROR = 3;
ALLOWED_EXT_ERROR = 4;

onDimensionError:

Fires when image dimension error occurred.

Example :

• Fire the dimension error when the specified attributes in the html.

  <div id="test" data-max-width="640" data-max-height="960" data-min-width="640" data-min-height="960"></div>

$('#test").imagify({
            onDimensionError: function (file) {
			 	alert('Dimension error !')
});

or you can specify the attributes in the javascript side.Dimensions in px.

$('#test").imagify({
			maxWidth:  2000,
			minWidth:  1,
 		   maxHeight:  3000,
			minHeight:  1,
            onDimensionError: function (file) {
			 	alert('Dimension error !')
});

file : The selected image file element.

onMinSizeError:

Fires when minimum image size error occurred.

Example :

• Fire the minimum image size error when the specified attributes in the html.

 <div id="test" data-max-file-size="5" data-min-file-size="1"></div>

$('#test").imagify({
            onMinSizeError: function (file) {
			 	alert('Min size error !')
});

onMaxSizeError:

Fires when maximum image size error occurred.

Example :

• Fire the maximum size error when the specified attributes in the html.

 <div id="test" data-max-file-size="5" data-min-file-size="1"></div>

$('#test").imagify({
            onMaxSizeError: function (file) {
			 	alert('Max size error !')
});

onAllowedExtError:

Fires when image extension error occurred.

Example :

• Fire the image extension error when the specified attributes in the html.

 <div id="test"    data-allowed-file-extensions="png jpg jpeg"></div>

$('#test").imagify({
            onAllowedExtError: function (file) {
			 	alert('This extension is not allowed. Just available for Png, Jpg or Jpeg !')
});

Default options :

style: 'border: 1px solid #ccc;',
minSize: 0, // MB
maxSize: 1, // MB
maxSizeErrorMessage: 'Imagify : Max size error !',
minSizeErrorMessage: 'Imagify : Min size error !',

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

allowedExt: elm.attr('data-allowed-file-extensions') || 'jpg jpeg png',
allowedExtErrorMessage: 'Imagify : Not allowed image extension !',

showThumb: true, // show preview image
feedElement: true, // add the 'data-src' attribute to the element
chooseText: "Choose Image",
changeFileText: "Change Image",
showImageLabel: true