Hello to everyone here!
First, I searched for duplicate posts but I've not found something like my issue.
I'm making some tests (you will see some repeat in my code) to upload multiple files with bootstrap fileinput and I have some issues using the "delete" button on thumbnail previews.
The upload function is working fine, showing already uploaded images if exists with initialPreview option.
I'm trying to dynamically create the intialPreviewConfig option, and for the moment I don't know why it's not working (clicking the "delete" button give no actions at all, it's like the option is not present). However, when I manually add the intialPreviewConfig (not in a variable), it's magically working fine.
Sample javascript code (some of values are different in my true code) :
var e = 'http://localhost/foo/';
// Where other_prev is an array of img
// Where other_images_path is an array of paths to images
var other_prev = ['...'];
var other_images_path = ['...'];
var uploadOtherFileInput = function ($input) {
console.log(other_prev); // Okay : array with img tags
console.log(other_images_path); // Okay : array with urls to images
var id_to_upload;
// If id already exists
if($('#id').length) {
id_to_upload = $('#id').val();
} else {
id_to_upload = $('#id_to_upload').val();
}
// Construct initial preview config for deleting images
var initialPreviewConfig = [];
if(Array.isArray(other_images_path)) {
var xhr;
// Convert paths of images to blob objects
for(var i = 0; i < other_images_path.length; i++) {
(function (i) {
xhr = new XMLHttpRequest();
xhr.open('GET', other_images_path[i], true);
xhr.responseType = 'blob';
xhr.onload = function (ev) {
if (this.status == 200) {
var blobFile = this.response;
var splitted_path = other_images_path[i].split('/');
var img_name = splitted_path[splitted_path.length - 1];
blobFile.name = img_name;
initialPreviewConfig.push({
"caption": img_name,
"size": blobFile.size,
"url": e + 'ajax/delete_image',
"key": i + 1
});
}
};
xhr.send();
}).call(this, i);
}
}
// Console log is working
console.log(initialPreviewConfig);
// Making the bootstrap fileinput
// Working fine to show previews and upload new images
// Not working for initialPreviewConfig to delete images
$input.fileinput({
language: 'fr',
allowedFileExtensions: ["jpg", "jpeg", "png"],
uploadUrl: e + 'ajax/upload_image_sup',
uploadAsync: false, // Permet d'obtenir toutes les images en une fois et d'attendre la fin
minFileCount: 0,
maxFileCount: 20,
resizeImage: true,
showClose: false,
showCaption: false,
showBrowse: true,
showUpload: false,
showUploadedThumbs: false,
showPreview: true,
uploadExtraData: function () {
var out = {};
out.id = id_to_upload;
return out;
},
layoutTemplates: {
footer: '<div class="file-thumbnail-footer">\n' +
' <div class="file-caption-name" style="width:{width}">{caption}</div>\n' +
' {actions}\n' +
'</div>',
actions: '<div class="file-actions">\n' +
' <div class="file-footer-buttons">\n' +
' {delete} {zoom}' +
' </div>\n' +
' {drag}\n' +
' <div class="file-upload-indicator" title="{indicatorTitle}">{indicator}</div>\n' +
' <div class="clearfix"></div>\n' +
'</div>'
},
initialPreviewFileType: 'image',
initialPreview: other_prev,
initialPreviewConfig: initialPreviewConfig
});
// Okay it's a repeat thing but it's just for test purposes
if(Array.isArray(other_images_path)) {
var xhr;
for(var i = 0; i < other_images_path.length; i++) {
(function (i) {
xhr = new XMLHttpRequest();
xhr.open('GET', other_images_path[i], true);
xhr.responseType = 'blob';
xhr.onload = function (e) {
if (this.status == 200) {
var blobFile = this.response;
var splitted_path = other_images_path[i].split('/');
var img_name = splitted_path[splitted_path.length - 1];
blobFile.name = img_name;
// Add preview to stack for overwrite
$input.fileinput('addToStack', blobFile);
}
};
xhr.send();
}).call(this, i);
}
}
};
Console logs of other_prev and other_images_path are okay to create the previews.
Now the console log of the variable initialPreviewConfig is (width is not present but I removed it, no changes) :
[]
0: {caption: "xxx.jpeg", size: 381939, url: e + "ajax/delete_image", key: 1}
1: {caption: "yyy.jpeg", size: 381939, url: e + "ajax/delete_image", key: 2}
2: {caption: "zzz.jpeg", size: 381939, url: e + "ajax/delete_image", key: 3}
3: {caption: "aaa.jpeg", size: 381939, url: e + "ajax/delete_image", key: 4}
4: {caption: "bbb.JPG", size: 2442700, url: e + "ajax/delete_image", key: 5}
length: 5
__proto__: Array(0)
So everything seems to be OK... But that is not working for deleting. However, if I manually create the config it's working "fine" (the ajax/delete_image route is not created at the moment but the click is OK and I get an error for this).
Example (values are not important here) :
...
initialPreviewFileType: 'image',
initialPreview: other_prev,
initialPreviewConfig: [
{caption: "xxx.jpg", size: 576237, width: "120px", url: e + "ajax/delete_image", key: 1},
{caption: "yyy.jpg", size: 576237, width: "120px", url: e + "ajax/delete_image", key: 2},
...
]
...
Can somebody help me with this issue or facing / faced the same ? Tell me if you want more examples or a JSFiddle.
For this test, I'm using :
- PHP 5.6 with framework CodeIgniter 3
- Chrome 75
- Bootstrap 3.3.7
- jQuery 3.1.1
- Bootstrap Fileinput 4.4.3
I also could use jQuery ($.ajax, $.get...) instead of XMLHttpRequest but it's not the question I think.
Thanks! Good day!
