<?php // Preload the first 10 files to not call via AJAX when the user open the first time the media manager if (IMAGE_RESTRICT) { $imagesDirectory = (IMAGE_RELATIVE_TO_ABSOLUTE? '' : HTML_PATH_UPLOADS_PAGES.$uuid.'/'); $imagesURL = (IMAGE_RELATIVE_TO_ABSOLUTE? '' : DOMAIN_UPLOADS_PAGES.$uuid.'/'); $thumbnailDirectory = PATH_UPLOADS_PAGES.$uuid.DS.'thumbnails'.DS; $thumbnailHTML = HTML_PATH_UPLOADS_PAGES.$uuid.'/thumbnails/'; $thumbnailURL = DOMAIN_UPLOADS_PAGES.$uuid.'/thumbnails/'; } else { $imagesDirectory = (IMAGE_RELATIVE_TO_ABSOLUTE? '' : HTML_PATH_UPLOADS); $imagesURL = (IMAGE_RELATIVE_TO_ABSOLUTE? '' : DOMAIN_UPLOADS); $thumbnailDirectory = PATH_UPLOADS_THUMBNAILS; $thumbnailHTML = HTML_PATH_UPLOADS_THUMBNAILS; $thumbnailURL = DOMAIN_UPLOADS_THUMBNAILS; } $listOfFilesByPage = Filesystem::listFiles($thumbnailDirectory, '*', '*', $GLOBALS['MEDIA_MANAGER_SORT_BY_DATE'], $GLOBALS['MEDIA_MANAGER_NUMBER_OF_FILES']); $preLoadFiles = array(); if (!empty($listOfFilesByPage[0])) { foreach ($listOfFilesByPage[0] as $file) { $filename = basename($file); array_push($preLoadFiles, $filename); } } // Amount of pages for the paginator $numberOfPages = count($listOfFilesByPage); ?> <div id="jsbluditMediaModal" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="container-fluid"> <div class="row"> <div class="col p-3"> <!-- UPLOAD INPUT --> <h3 class="mt-2 mb-3"><?php $L->p('Upload'); ?></h3> <!-- Form and Input file --> <form name="bluditFormUpload" id="jsbluditFormUpload" enctype="multipart/form-data"> <div class="custom-file"> <input type="file" class="custom-file-input" id="jsbluditInputFiles" name="bluditInputFiles[]" multiple> <label class="custom-file-label" for="jsbluditInputFiles"><?php $L->p('Choose images to upload'); ?></label> </div> </form> <!-- Progress bar --> <div class="progress mt-2"> <div id="jsbluditProgressBar" class="progress-bar bg-info" role="progressbar" style="width:0%"></div> </div> <!-- MANAGER --> <h3 class="mt-4 mb-3"><?php $L->p('Manage'); ?></h3> <!-- Table for list files --> <table id="jsbluditMediaTable" class="table"> <tr> <td><?php $L->p('There are no images'); ?></td> </tr> </table> <!-- Paginator --> <nav> <ul class="pagination justify-content-center"> <?php for ($i=1; $i<=$numberOfPages; $i++): ?> <li class="page-item"><button type="button" class="btn btn-link page-link" onClick="getFiles(<?php echo $i ?>)"><?php echo $i ?></button></li> <?php endfor; ?> </ul> </nav> </div> </div> </div> </div> </div> </div> <script> <?php echo 'var preLoadFiles = '.json_encode($preLoadFiles).';'; ?> function openMediaManager() { $('#jsbluditMediaModal').modal('show'); } function closeMediaManager() { $('#jsbluditMediaModal').modal('hide'); } // Remove all files from the table function cleanFiles() { $('#jsbluditMediaTable').empty(); } // Show the files in the table function displayFiles(files) { // Clean table cleanFiles(); // Regenerate the table $.each(files, function(key, filename) { var thumbnail = "<?php echo $thumbnailURL; ?>"+filename; var image = "<?php echo $imagesURL; ?>"+filename; tableRow = '<tr id="js'+filename+'">'+ '<td style="width:80px"><img class="img-thumbnail" alt="200x200" src="'+thumbnail+'" style="width: 50px; height: 50px;"><\/td>'+ '<td class="information">'+ '<div class="pb-2">'+filename+'<\/div>'+ '<div>'+ '<button type="button" class="btn btn-primary btn-sm mr-2" onClick="editorInsertMedia(\''+image+'\'); closeMediaManager();"><?php $L->p('Insert') ?><\/button>'+ '<button type="button" class="btn btn-primary btn-sm" onClick="setCoverImage(\''+filename+'\'); closeMediaManager();"><?php $L->p('Set as cover image') ?><\/button>'+ '<button type="button" class="btn btn-secondary btn-sm float-right" onClick="deleteMedia(\''+filename+'\')"><?php $L->p('Delete') ?><\/button>'+ '<\/div>'+ '<\/td>'+ '<\/tr>'; $('#jsbluditMediaTable').append(tableRow); }); } // Get the list of files via AJAX, filter by the page number function getFiles(pageNumber) { $.post(HTML_PATH_ADMIN_ROOT+"ajax/list-images", { tokenCSRF: tokenCSRF, pageNumber: pageNumber, uuid: "<?php echo $uuid; ?>", path: "thumbnails" // the paths are defined in the list-images.php }, function(data) { displayFiles(data.files); } ); } // Delete the file and the thumbnail if exist function deleteMedia(filename) { $.post(HTML_PATH_ADMIN_ROOT+"ajax/delete-image", { tokenCSRF: tokenCSRF, filename: filename, uuid: "<?php echo $uuid; ?>" }, function(data) { getFiles(1); } ); } function setCoverImage(filename) { var image = "<?php echo $imagesURL; ?>"+filename; $("#jscoverImage").val(filename); $("#jscoverImagePreview").attr("src", image); } $(document).ready(function() { // Display the files preloaded for the first time displayFiles(preLoadFiles); // Event to wait the selected files $("#jsbluditInputFiles").on("change", function() { // Check file size ? // Check file type/extension ? $("#jsbluditProgressBar").width("1%"); // Data to send via AJAX var uuid = $("#jsuuid").val(); var formData = new FormData($("#jsbluditFormUpload")[0]); formData.append('uuid', uuid); formData.append('tokenCSRF', tokenCSRF); $.ajax({ url: HTML_PATH_ADMIN_ROOT+"ajax/upload-images", type: "POST", data: formData, cache: false, contentType: false, processData: false, xhr: function() { var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total)*100; $("#jsbluditProgressBar").width(percentComplete+"%"); } }, false); } return xhr; } }).done(function() { // Get the files of the first page, this include the files uploaded getFiles(1); }); }); }); </script>