You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
318 lines
16 KiB
318 lines
16 KiB
/**
|
|
* spartan-multi-image-picker.js
|
|
* Repo : https://github.com/adispartadev/spartan-multi-image-picker
|
|
* Created By I Wayan Adi Sparta, 2018
|
|
*/
|
|
(function ($) {
|
|
"use strict";
|
|
|
|
var ADDICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfiBA4PGSVZX/u4AAAGhUlEQVRo3u2ZbXBU5RXHf8/NOy+BSOWtCbB3N5CIQBCwzDjjuE4xQUVKZ1od+WIhATttRVFpK9UPRUorg5bUtxacynSmQ6e2Io6lSgi0UxFrjNNRKrD3uUuIaBgmljdrJpvc0w/P7mbzstmkuQtfOJ/uOffs8//d5z773HvOhat2hU31dp0yq8ob7cfA0mZ9EDw/DAB3rrdJLWaijxcnaLWvc2PFxYwATXklG3mMPB/Fe+wUq4MNGQD0X1iajFzgS1+ES8hPzITcG9o9CIBbKzsAOMdGeSvk+HPhkYLcKm8t3wFQ7cy2z6RLLNXntWjRH5ya6o90qrl36ZgWLfpP6TKsnHsoBjpy7p32qf8A9l42A/DNyLVpAOQGAPndjI/9lwf4z2a+ALAWpQHgBgCasiMPC2O8bw7SAcwEIJItAJDjAMxKB6AARLIHoDwAlZMO4ArbVYDc4SS3FnXN88bkN5d9fkVmwK3rbPPeYX/nWb0tWnjZZ8C5T36ThF7fXUzdZZ0ByVHbUn1VG5l/WQF0Jdf0juTcNFBea1GWAKx+24j0i0TmO//uPOs8nhWAlqPmkZLyw3d7+9Eqq0FVMlr9VP88CwDhLn7SK/BK4Eiq686ThuRN+qH+he8AYNfLE3TGnd9T20t+LgdkAgCXANjgPjXUcdP+DaPjvXVqtHo60GZ85bEpuqN7sTVGNQWOpWbqOXIAI/9La7t3iOkgjzoq9OgIAKLjvQYWCLLi+C2zTieigTb29M10rucAXwFge/AhOBnuPsQ0UI84KvTI/3kLIsXemywAIJR7cLB3xchsdYBrAVR98EGAGdHuMK0A6mG9jYw2AMCxsepNbky65bGDJ6ekkb/OajSljKq31yWiM10vzCcArM+M0A/g6Ji8fWoxAP/gZTNi98Ho5P4/PVmZlP9VjzxAuZYwp+MITw8LoG104RuYPe7tjqX2Kl4CYJbXDyFa0d3IpLj8A32HDTmExbxlP8Q9QwZoLfridW6Oy9fMvqTErosjVHQ3upN6Mt1ZXiOTAeTZ/vIAwYhKIIwbIkC0sHMvYQAOx5bOvgSgxK6TnQCqUhqdeOmqZ8pBphj50A/SDR08Yd3KZ2SwJECkoHsPX4/L1/RUtEqCa+Kl23Wq0ZkIujwhz3Pp5QHs4yxPbF5S6k4fKEdpAVDVso7bAdQ7ndV9C2pR0RdlDQAfeWusP/JVIx/8/mDyTo16gFspSAl9KK+rPcH3BgBAE0wn3wchYc8Hv5deXM+UelU98Dm1S9b1tC4SAEbmiFSXXxj4Z6LcF1g7NHl3mexmVErgDKpX6+MTtcrebw5TFuFg8qDE/i4vxp0X7EEmX98prxp51S5PyO3WlODk4CSvzPsGWzDjl8pb7uq+M/Cud1t6+eQsbFB3e7uDW1XaSurjCflHzf7AG1Zt4lGWhJvGDm4D4KKaY7cAWrRo0Ucixfhizh+0aNGek1wxkWL3YbeuKdkActZqT4sW3SAqCeCEfZK/24znbk+JPalFi3Nfyjw8E7/s+5NrwJ/iNFJgPWcOCn+cEl4IEH++AJD/GKZifurYWF9LMxU270Wqdup/B8sr+1JWATA29w5/Ae4C4HP775kyQ4dVOwArhlUbZrTrAWg2TrSqazyAMi+rUyO3AOR8Zh8HkGaWgKr0F6AUwLRk3D3e8l7Tu8xaBiC4W+0NwPssASb7W55fAyDHoClPqtMlyQoA5QIwzsI0UNQQhs9sbQCqBBbG5Gd9Sxljql2eBBK366zFCQDKfQE4BWAea6FN9jiryCqyitgPIDuNF5gY2gWAadu1WfEG3cLhqw1gHwJQE7/W7kBHoCPQIV6qZ1pWTXliqut/WvIegFp5wvYB4FUzA9GvZUos+TamxfFnK/8VzgOjcn7bUjJSffttUxF49ZKyuFUXAF09EXeSMlt1y6lD1rRPWQ/AzbGP9MpI6UgAlLAFgBvdrSnRfQBqb09EnpcJgLA63NX/e8EZzo2AIdcsQZBnCzaUxb88ODepC0GzPogWelt4EIBfB++Pf7A4ml/0uPxoeB2zIZhj1Qb+1jukF8kuVQlAS2xOxcWUb0bOAjarRX0bMSM04TU5rJpzmyFWpeaziG9hOivn1HLzxOizAbnTmeeNGrZQH1OKldwxyPm/xmoTNbc/O+AA5tSoZ6gY4MQFtd5+KQUmWwDQlFdSxxKqmJEM/YvXZGeotddsZA8gYXqcmivF1umO1sr27KtdtWHb/wAERFuYrBJ1jgAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOC0wNC0xNFQxNToyNTozNyswMjowMKaBIu8AAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTgtMDQtMTRUMTU6MjU6MzcrMDI6MDDX3JpTAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==';
|
|
$.fn.spartanMultiImagePicker = function(options) {
|
|
|
|
var count = 0;
|
|
var last_index = 0;
|
|
var total_count = 0;
|
|
|
|
var defaults = {
|
|
fieldName: '',
|
|
groupClassName: 'col-md-4 col-sm-4 col-xs-6',
|
|
rowHeight: '200px',
|
|
dropFileLabel: 'Drop file here',
|
|
placeholderImage: {
|
|
image : ADDICON,
|
|
width : '64px'
|
|
},
|
|
maxCount: '',
|
|
maxFileSize: '',
|
|
allowedExt: 'png|jpg|jpeg|gif',
|
|
onAddRow: function() {},
|
|
onRenderedPreview: function() {},
|
|
onRemoveRow: function() {},
|
|
onExtensionErr: function() {},
|
|
onSizeErr: function() {},
|
|
directUpload : {
|
|
loaderIcon: '<i class="fas fa-sync fa-spin"></i>',
|
|
status: false,
|
|
url: '',
|
|
success: function() {},
|
|
error: function() {}
|
|
},
|
|
};
|
|
|
|
var settings = $.extend( {}, defaults, options );
|
|
|
|
|
|
/**
|
|
* CALLED ON IMAGE SUCCESS RENDERED AND ADD NEW IMAGE
|
|
* @param {[type]} settings [description]
|
|
* @param {[type]} el [description]
|
|
*/
|
|
function addRow(settings, el){
|
|
last_index = count;
|
|
var groupClassName = settings.groupClassName, rowHeight = settings.rowHeight, fieldName = settings.fieldName, placeholderImage = settings.placeholderImage, dropFileLabel = settings.dropFileLabel;
|
|
var placeholderImageTarget = placeholderImage.image;
|
|
var placeholderImageWidth = '64px';
|
|
|
|
var uploadLoaderIcon = '<i class="fas fa-sync fa-spin"></i>';
|
|
if(typeof settings.directUpload.loaderIcon != 'undefined'){
|
|
uploadLoaderIcon = settings.directUpload.loaderIcon;
|
|
}
|
|
|
|
if(typeof placeholderImage.width != 'undefined'){
|
|
placeholderImageWidth = placeholderImage.width;
|
|
}
|
|
var template = `<div class="${groupClassName} spartan_item_wrapper" data-spartanindexrow="${count}" style="margin-bottom : 20px; ">`+
|
|
`<div style="position: relative;">`+
|
|
`<div class="spartan_item_loader" data-spartanindexloader="${count}" style=" position: absolute; width: 100%; height: ${rowHeight}; background: rgba(255,255,255, 0.7); z-index: 22; text-align: center; align-items: center; margin: auto; justify-content: center; flex-direction: column; display : none; font-size : 1.7em; color: #CECECE">` +
|
|
`${uploadLoaderIcon}` +
|
|
`</div>`+
|
|
`<label class="file_upload" style="width: 100%; height: ${rowHeight}; border: 2px dashed #ddd; border-radius: 3px; cursor: pointer; text-align: center; overflow: hidden; padding: 5px; margin-top: 5px; margin-bottom : 5px; position : relative; display: flex; align-items: center; margin: auto; justify-content: center; flex-direction: column;">`+
|
|
`<a href="javascript:void(0)" data-spartanindexremove="${count}" style="position: absolute !important; right : 3px; top: 3px; display : none; background : transparent; border-radius: 3px; width: 30px; height: 30px; line-height : 30px; text-align: center; text-decoration : none; color : #ff0700;" class="spartan_remove_row"><i class="tio-add-to-trash"></i></a>`+
|
|
`<img style="width: ${placeholderImageWidth}; margin: 0 auto; vertical-align: middle;" data-spartanindexi="${count}" src="${placeholderImageTarget}" class="spartan_image_placeholder" /> `+
|
|
`<p data-spartanlbldropfile="${count}" style="color : #5FAAE1; display: none; width : auto; ">${dropFileLabel}</p>`+
|
|
`<img style="width: 100%; vertical-align: middle; display:none;" class="img_" data-spartanindeximage="${count}">`+
|
|
`<input class="form-control spartan_image_input" accept="image/*" data-spartanindexinput="${count}" style="display : none" name="${fieldName}" type="file">`+
|
|
`</label> `+
|
|
`</div>`+
|
|
`</div>`;
|
|
|
|
var html = $.parseHTML(template);
|
|
|
|
$(el).append(html);
|
|
count++;
|
|
var param = {
|
|
index : count,
|
|
last_index : last_index
|
|
};
|
|
settings.onAddRow.call(this, count);
|
|
}
|
|
|
|
|
|
/**
|
|
* CALLED ON IMAGE RENDERED
|
|
* @param {[type]} settings [description]
|
|
* @param {[type]} input [description]
|
|
* @param {[type]} parent [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
function loadImage(settings, input, parent){
|
|
var index = $(input).data('spartanindexinput');
|
|
|
|
if (input.files && input.files[0]) {
|
|
|
|
var file_select = input.files[0], allowedExt = settings.allowedExt, maxFileSize = settings.maxFileSize;
|
|
var file_select_type = file_select.type,
|
|
regex = new RegExp(`(.*?)\.(${allowedExt})$`);
|
|
|
|
if(regex.test(file_select_type) || allowedExt == ''){
|
|
|
|
if((maxFileSize == '') || (maxFileSize != '' && file_select.size <= maxFileSize)){
|
|
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
$(parent).find('img[data-spartanindexi="'+index+'"]').hide();
|
|
$(parent).find('a[data-spartanindexremove="'+index+'"]').show();
|
|
$(parent).find('img[data-spartanindeximage="'+index+'"]').attr('src', e.target.result);
|
|
$(parent).find('img[data-spartanindeximage="'+index+'"]').show();
|
|
settings.onRenderedPreview.call(this, index);
|
|
|
|
// on upload
|
|
if(settings.directUpload.status == true){
|
|
actionDirectUpload(settings, input, parent);
|
|
}
|
|
};
|
|
|
|
reader.readAsDataURL(input.files[0]);
|
|
var is_add = false;
|
|
if( $(parent).find('img[data-spartanindeximage="'+index+'"]').is(":visible") == false){
|
|
total_count++;
|
|
is_add = true;
|
|
}
|
|
if(index == (count - 1) && is_add ){
|
|
if(settings.maxCount == ''){
|
|
addRow(settings, parent);
|
|
}
|
|
else if(settings.maxCount != '' && total_count < settings.maxCount ){
|
|
addRow(settings, parent);
|
|
}
|
|
}
|
|
}
|
|
else if(maxFileSize != '' && file_select.size > maxFileSize){
|
|
|
|
if( $(parent).find('img[data-spartanindeximage="'+index+'"]').is(":visible") == true){
|
|
$(parent).find('img[data-spartanindexi="'+index+'"]').hide();
|
|
}
|
|
settings.onSizeErr.call(this, index, file_select);
|
|
return false;
|
|
}
|
|
|
|
}
|
|
else{
|
|
if( $(parent).find('img[data-spartanindeximage="'+index+'"]').is(":visible") == true){
|
|
$(parent).find('img[data-spartanindexi="'+index+'"]').hide();
|
|
}
|
|
settings.onExtensionErr.call(this, index, file_select);
|
|
return false;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* CALLED ON UPLOAD IS ON
|
|
* @param {[type]} settings [description]
|
|
* @param {[type]} input [description]
|
|
* @param {[type]} parent [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
function actionDirectUpload(settings, input, parent){
|
|
var index = $(input).data('spartanindexinput');
|
|
var formData = new FormData();
|
|
var file = input.files[0];
|
|
var additionalParam = settings.directUpload.additionalParam;
|
|
$(parent).find('[data-spartanindexloader="'+index+'"]').css('display', 'flex');
|
|
formData.append('file', file);
|
|
|
|
if(typeof additionalParam != 'undefined'){
|
|
$.each(additionalParam, function(key, value){
|
|
formData.append(key, value);
|
|
});
|
|
}
|
|
|
|
$.ajax({
|
|
url: settings.directUpload.url,
|
|
type: 'POST',
|
|
data: formData,
|
|
cache: false,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function(data, textStatus, jqXHR){
|
|
$(parent).find('[data-spartanindexloader="'+index+'"]').css('display', 'none');
|
|
|
|
if(typeof settings.directUpload.success != 'undefined'){
|
|
settings.directUpload.success(this, data, textStatus, jqXHR);
|
|
}
|
|
},
|
|
error: function(jqXHR, textStatus, errorThrown){
|
|
$(parent).find('[data-spartanindexloader="'+index+'"]').css('display', 'none');
|
|
if(typeof settings.directUpload.error != 'undefined'){
|
|
settings.directUpload.error(this, jqXHR, textStatus, errorThrown);
|
|
}
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* CALLED ON CLOSE BUTTON CLICK
|
|
* @param {[type]} settings [description]
|
|
* @param {[type]} input [description]
|
|
* @param {[type]} parent [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
function removeRow(settings, input, parent){
|
|
var index = $(input).data('spartanindexremove');
|
|
$(parent).find('[data-spartanindexrow="'+index+'"]').remove();
|
|
if (last_index == index || $(parent).find('img[data-spartanindeximage="'+last_index+'"]').is(":visible") == true){
|
|
addRow(settings, parent);
|
|
}
|
|
total_count--;
|
|
settings.onRemoveRow.call(this, index);
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* CALLED ON HOVER THE BOX
|
|
* @param {[type]} parent [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
function onDragEnter(parent){
|
|
var index = $(parent).data('spartanindexrow');
|
|
$(parent).find('.file_upload').css({'border-color': '#5FAAE1', 'background' : '#DBE9F3'});
|
|
if( $(parent).find('img[data-spartanindeximage="'+index+'"]').is(":visible") == false){
|
|
$(parent).find('p[data-spartanlbldropfile="'+index+'"]').show();
|
|
$(parent).find('img[data-spartanindexi="'+index+'"]').hide();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
* ON LEAVE BOX
|
|
* @param {[type]} parent [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
function onDragLeave(parent){
|
|
var index = $(parent).data('spartanindexrow');
|
|
$(parent).find('.file_upload').css({'border-color': '#ddd', 'background' : 'none'});
|
|
if( $(parent).find('img[data-spartanindeximage="'+index+'"]').is(":visible") == false){
|
|
$(parent).find('p[data-spartanlbldropfile="'+index+'"]').hide();
|
|
$(parent).find('img[data-spartanindexi="'+index+'"]').show();
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
* DROP IMAGE TO BOX
|
|
* 1. GET THE FILE
|
|
* 2. RESET STYLING
|
|
* 3. RENDER THE IMAGE
|
|
* @param {[type]} setting [description]
|
|
* @param {[type]} input [description]
|
|
* @param {[type]} parent [description]
|
|
* @param {[type]} evt [description]
|
|
* @return {[type]} [description]
|
|
*/
|
|
function onDropImage(setting, input, parent, evt){
|
|
var index = $(input).data('spartanindexrow');
|
|
var file_p = $(parent).find('.spartan_image_input[data-spartanindexinput="'+index+'"]');
|
|
file_p.files = evt.originalEvent.dataTransfer.files;
|
|
|
|
// clear on hover style
|
|
$(input).find('.file_upload').css({'border-color': '#ddd', 'background' : 'none'});
|
|
$(input).find('p[data-spartanlbldropfile="'+index+'"]').hide();
|
|
$(input).find('img[data-spartanindexi="'+index+'"]').show();
|
|
|
|
loadImage(settings, file_p, parent);
|
|
}
|
|
|
|
|
|
|
|
return this.each( function() {
|
|
var that = this;
|
|
addRow(settings, that);
|
|
|
|
$(this).on("change", ".spartan_image_input", function(){
|
|
loadImage(settings, this, that);
|
|
});
|
|
|
|
$(this).on("click", ".spartan_remove_row", function(){
|
|
removeRow(settings, this, that);
|
|
});
|
|
|
|
|
|
$(this).on("dragenter dragover dragstart", '.spartan_item_wrapper', function(event){
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
onDragEnter(this);
|
|
});
|
|
|
|
$(this).on("dragleave", '.spartan_item_wrapper', function(){
|
|
onDragLeave(this);
|
|
});
|
|
|
|
|
|
$(this).on("drop", '.spartan_item_wrapper', function(event){
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
onDropImage(settings, this, that, event);
|
|
});
|
|
|
|
});
|
|
};
|
|
})(jQuery);
|
|
|