I have a list of records with which I want to have the possibility to upload images for each one and build an independent carousel. To separate them I create a folder whose name is the registration id.
I am using this library and in the traditional way it works well. Everything on a button and on a new page according to the id shows me the contents of the folder and gives me the possibility to delete or upload new ones.
The problem is wanting to go "a little further" and that this happens within a modal on the same page, I can not find the way to pass the id to the initialPreview, which is where I should see the contents of the folder that record and give me the ability to add new images, since I'm combining php with jquery.
The code that works does the following:
<?php
$directory = "../img_tr_edad/".$id."/";
$images = glob($directory . "*.*");
?>
and the script:
<script>
$('#file-es').fileinput({
uploadUrl: 'upload.php',
theme: 'fa',
language: 'es',
allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],
minFileCount: 1,
maxFileCount: 30,
uploadAsync: true,
overwriteInitial: false,
maxFileSize: 10000,
initialPreviewAsData: false,
uploadExtraData: function() {
return { id_car: $("#id_car").val() };
},
initialPreview: [
<?php foreach( $images as $image ) { ?>
"<img src='<?php echo $image; ?>' height='120px' class='file-preview-image'>",
<?php } ?>
],
initialPreviewConfig: [
<?php foreach($images as $image) { $infoImagenes = explode("/",$image);?>
{caption: "<?php echo $infoImagenes[1];?>", height: "120px", url: "borrar.php", key: "<?php echo $infoImagenes[1]; ?> "},
<?php } ?> ]}).on("filebatchselected", function(event, files) {
$("file-es").fileinput("upload");
});
</script>
I appreciate the help.