I am using this package, and I have modified it a bit, so that I can upload, drag and sort the images and preview them in the browser. Uploading works fine, and deleting of images. But I found a scenario when the script breaks. When I have more than one image and I delete the first image, on trying to upload the same image that I deleted the script doesn't work anymore. But if I don't try to upload the same image immediately and first upload some other and then the one that was deleted, then it works. Also, I don't get any errors in the console. I am not sure how to fix this.
My full code is here.
This is part of the code:
$(document).ready(function () {
var imageCounter = 0;
$('#articleForm').submit(function () {
uploadPosition();
});
function uploadPosition() {
var uploadedImagesPositions = [];
$.each($('.jFiler-item-thumb-image'), function (index, value) {
$(this).attr('data-position-index', index);
uploadedImagesPositions[index] = $(this).find('img').attr('src');
});
if (!$('input[name="uploadedItems"]').length) {
$('<input>', {
type: "hidden",
name: "uploadedItems"
}).appendTo('#articleForm')
}
$('input[name="uploadedItems"]').val(JSON.stringify(uploadedImagesPositions));
$("input[name^='jfiler-items-exclude-']:hidden").detach();
console.log(uploadedImagesPositions);
}
$('#upload').filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><h1>+</h1></div>',
showThumbs: true,
appendTo: '.uploaded_items',
theme: "default",
templates: {
box: '<div class="jFiler-item-list"></div>',
item: '<div class="jFiler-item img-container dragdiv"></div>',
itemAppend: '<div class="jFiler-item img-container dragdiv"></div>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
removeConfirmation: false,
_selectors: {
list: '.jFiler-item-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action',
}
},
uploadFile: {
url: "/admin/articles/ajax",
data: {
'_token': $('input[name="_token"]').val()
},
type: 'POST',
enctype: 'multipart/form-data',
beforeSend: function () {},
success: function (data, el) {
uploadedImagesPositions = [];
console.log(data);
var filenameArray = data.split('/');
var name = filenameArray.slice(-1).pop();
var filename = name.replace(/[\/\s()]/g, '');
var imageContainer = $('[data-jfiler-index="' + imageCounter + '"]').first();
$('<div class="jFiler-item-thumb-image"><img src="/imagecache/thumb/' + filename + '"></div><div class="overlay"><a href="#"><span><i class="jFiler-item-trash-action ion-trash-a"></span></a></div>').appendTo(imageContainer);
imageCounter++;
$(".dragdiv").each(function () {
makeElementAsDragAndDrop($(this));
});
$('.images-refresh').hide();
$('.images-refresh').click(function () {
$(this).closest("form").submit()
});
function makeElementAsDragAndDrop(elem) {
$(elem).draggable({
revert: "invalid",
cursor: "move",
helper: "clone"
});
$(elem).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function (event, ui) {
uploadedImagesPositions = [];
$('.images-form a').hide();
$('.images-refresh').show();
var $dragElem = $(ui.draggable).clone().replaceAll(this);
$(this).replaceAll(ui.draggable);
makeElementAsDragAndDrop(this);
makeElementAsDragAndDrop($dragElem);
}
});
}
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function () {
$("<div class=\"jFiler-item-others text-success\"><i class=\"icon-jfi-check-circle\"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function (el) {
console.log(el);
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function () {
$("<div class=\"jFiler-item-others text-error\"><i class=\"icon-jfi-minus-circle\"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: {},
onProgress: function () {},
},
dragDrop: {
dragEnter: function () {},
dragLeave: function () {},
drop: function () {},
},
addMore: true,
clipBoardPaste: true,
excludeName: null,
beforeShow: function () {
return true
},
onSelect: function () {},
afterShow: function () {},
onRemove: function (el) {
imageCounter = $('.img-container').size() - 1;
//uploadPosition();
//console.log(el.find('img').attr('src'));
},
onEmpty: function () {
imageCounter = 0;
},
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
Update
I have updated fiddle with HTML and CSS as well as javascript code, unfortunately, I couldn't get it to work, so not sure how helpful it is, but at least you can see the full code. I am using this scripts on my page where I upload images:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript" src="{{ asset('js/foundation/foundation.min.js') }}"></script>
<script>$(document).foundation();</script>
<script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
jquery-filer is the script that I use for upload, the one that I have in fiddle.
And this is my server-side function for ajax upload. I am using PHP laravel in the backend:
public function ajaxUpload() {
if (Input::hasFile('file')) {
$files = Input::file('file');
foreach ($files as $file) {
$time = microtime(true);
$name = $file->getClientOriginalName();
$filename = $time.'-'.preg_replace('/[(\)\s]/u', '', $name);
if(substr($file->getMimeType(), 0, 5) == 'image') {
try {
$original = Image::make($file)->save(public_path($this->destinationPath.'/'.$filename));
\Log::info('try: '.$filename."\n");
} catch (Exception $e) {
\Log::info('Caught exception: '.$e->getMessage(). "\n");
}
$img = Image::cache(function($image) use ($original){
return $image->make($original);
});
}
}
}
return $this->destinationPath.$filename;
}
I was also using a JS image uploader which has the same type of issue. When a user uploads an image and deletes it and uploads the same image again, it does not work. So I fixed it using:
$('input[type="file"]').val(null);in the image deleted event.