Skip to content

Instantly share code, notes, and snippets.

@arysom
Created October 5, 2014 19:54
Show Gist options
  • Select an option

  • Save arysom/60fb9000c19b92f60481 to your computer and use it in GitHub Desktop.

Select an option

Save arysom/60fb9000c19b92f60481 to your computer and use it in GitHub Desktop.
uikit ajax picture upload and delete dynamically added pictures
$(function(){
var progressbar = $("#progressbar"),
bar = progressbar.find('.uk-progress-bar'),
settings = {
action: '/ajax/add_slideshow_pic', // upload url
param: 'userfile',
type: 'json',
allow : '*.(jpg|gif|png)', // allow only images
loadstart: function() {
bar.css("width", "0%").text("0%");
progressbar.removeClass("uk-hidden");
},
progress: function(percent) {
percent = Math.ceil(percent);
bar.css("width", percent+"%").text(percent+"%");
},
allcomplete: function(response) {
bar.css("width", "100%").text("100%");
setTimeout(function(){
progressbar.addClass("uk-hidden");
}, 250);
$('#slideshow-images').prepend('<li class="uk-overlay"><img src="/images/products_slideshow/'+response.file_name+'"/><div class="uk-overlay-area"><div class="uk-overlay-area-content"><a class="uk-button dedicorp-button-delete" href="#"><i class="uk-icon uk-icon-minus-circle"></i> usuń obrazek</a></div></div></li>');
}
};//end settings
var select = $.UIkit.uploadSelect($("#upload-select"), settings),
drop = $.UIkit.uploadDrop($("#upload-drop"), settings);
//delete image
$('body').on('click','.dedicorp-button-delete',function(e){
e.preventDefault();
$currentLi=$(this).closest('li');
$currentImg=$(this).closest('li').find('img');
var imgSrc=$currentImg.attr("src");
$.ajax({
type: "POST",
url: "/ajax/slideshow_remove_pic",
data: { "imgSrc": imgSrc}
})
.done(function() {
$currentLi.fadeOut('slow');
});
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment