<div class="modal" id="modal-fileManager" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col"> <div class="d-flex align-items-center mb-4"> <h3 class="me-auto m-0 p-0"><i class="bi bi-image"></i><?php $L->p('File Manager'); ?></h3> <label id="btnUploadFile" class="btn btn-primary"><i class="bi bi-upload"></i><?php $L->p('Upload file'); ?><input type="file" id="filesToUpload" name="filesToUpload[]" multiple hidden></label> <div id="progressUploadFile" class="progress w-25 d-none"> <div class="progress-bar" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> <table class="table"> <thead> <tr> <th scope="col"><?php echo $L->g('Preview') ?></th> <th scope="col"><?php echo $L->g('Filename') ?></th> <th scope="col"><?php echo $L->g('Type') ?></th> <th scope="col"><?php echo $L->g('Size') ?></th> <th scope="col"></th> </tr> </thead> <tbody id="fmFiles"> <!-- <tr> <td class="align-middle"> <img style="width: 32px" src="<?php echo HTML_PATH_CORE_IMG ?>default.svg" /> </td> <td class="align-middle">photo.jpg</td> <td class="align-middle">image/jpeg</td> <td class="align-middle">300Kb</td> <td class="align-middle"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="fileOptions" data-bs-toggle="dropdown" aria-expanded="false"> Options </button> <ul class="dropdown-menu" aria-labelledby="fileOptions"> <li><a class="dropdown-item" href="#">Insert</a></li> <li><a class="dropdown-item" href="#">Set as cover image</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#"><?php $L->p('Delete') ?></a></li> </ul> </div> </td> </tr> --> </tbody> </table> </div> </div> </div> </div> </div> </div> </div> <script> // Open File Manager modal function fmOpen() { $('#modal-fileManager').modal('show'); } // Close File Manager modal function fmClose() { $('#modal-fileManager').modal('hide'); } // Insert HTML code in the Editor content function fmInsertFile(filename, absoluteURL, mime) { if (mime == 'image/jpeg' || mime == 'image/png') { editorInsertContent(absoluteURL, 'image'); } else { editorInsertContent('<a href="' + absoluteURL + '">' + filename + '</a>'); } } // Get the files for the current page and show them function fmGetFiles() { logs('File Manager. Getting files for the current page: ' + _pageKey); api.getPageFiles({ 'pageKey': _pageKey }).then(function(response) { if (response.status == 0) { fmDisplayFiles(response.data); } else { logs("File Manager. An error occurred while trying to get the files for the current page."); showAlertError(response.message); } }); } function setCoverImage(filename) { var image = DOMAIN_UPLOADS_PAGES+_pageKey+'/'+filename; $("#coverImage").val(filename); $("#coverImagePreview").attr("src", image); } // Displays the files in the table function fmDisplayFiles(files) { $('#fmFiles').empty(); if (files.length == 0) { logs('File Manager. There are not files for the current page.'); return false; } $.each(files, function(key, file) { console.log(file); var row = '<tr>' + '<td class="align-middle">' + ' <img style="width: 32px" src="' + file.thumbnailSmall + '" />' + '</td>' + '<td class="align-middle">' + file.filename + '</td>' + '<td class="align-middle">' + file.mime + '</td>' + '<td class="align-middle">' + formatBytes(file.size) + '</td>' + '<td class="align-middle text-center">' + '<div class="dropdown">' + '<button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="fileOptions" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-gear"></i><?php $L->p('Options') ?></button>' + '<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="fileOptions">'; if (ALLOWED_IMG_MIMETYPES.includes(file.mime)) { row += '<li><a class="dropdown-item" href="#" onClick="fmInsertFile(\'' + file.filename + '\', \'' + file.absoluteURL + '\', \'' + file.mime + '\'); fmClose();"><i class="bi bi-plus-circle"></i><?php $L->p('Insert original size') ?></a></li>' + '<li><a class="dropdown-item" href="#" onClick="fmInsertFile(\'' + file.filename + '\', \'' + file.thumbnailSmall + '\', \'' + file.mime + '\'); fmClose();"><i class="bi bi-plus-circle"></i><?php $L->p('Insert small size') ?></a></li>' + '<li><a class="dropdown-item" href="#" onClick="fmInsertFile(\'' + file.filename + '\', \'' + file.thumbnailMedium + '\', \'' + file.mime + '\'); fmClose();"><i class="bi bi-plus-circle"></i><?php $L->p('Insert medium size') ?></a></li>' + '<li><hr class="dropdown-divider"></li>' + '<li><a class="dropdown-item" href="#" onClick="setCoverImage(\'' + file.filename + '\')"><i class="bi bi-image"></i><?php $L->p('Set as cover image') ?></a></li>'; } else { row += '<li><a class="dropdown-item" href="#" onClick="fmInsertFile(\'' + file.filename + '\', \'' + file.absoluteURL + '\', \'' + file.mime + '\'); fmClose();"><i class="bi bi-plus-circle"></i><?php $L->p('Insert file') ?></a></li>'; } row += '<li><hr class="dropdown-divider"></li>' + '<li><a class="dropdown-item" href="#" onClick="fmDeleteFile(\'' + file.filename + '\');"><i class="bi bi-trash"></i><?php $L->p('Delete') ?></a></li>' + '</ul>' + '</div>' + '</td>' + '</tr>'; $('#fmFiles').append(row); }); return true; } // Upload a file for the current page function fmUploadFile(file) { logs('File Manager. Uploading file.'); // Check file type/extension if (!ALLOWED_FILE_MIMETYPES.includes(file.type)) { logs("File Manager. File type is not supported."); showAlertError("<?php echo $L->g('File type is not supported. Allowed types:') . ' ' . implode(', ', $GLOBALS['ALLOWED_FILE_EXTENSIONS']) ?>"); return false; } // Check file size and compare with PHP upload_max_filesize if (file.size > UPLOAD_MAX_FILESIZE) { logs("File Manager. File size is to big for PHP configuration."); showAlertError("<?php echo $L->g('Maximum load file size allowed:') . ' ' . ini_get('upload_max_filesize') ?>"); return false; } // Start progress bar $('#btnUploadFile').addClass('d-none'); $('#progressUploadFile').removeClass('d-none'); $('#progressUploadFile').children('.progress-bar').width('0'); // Data to send via AJAX var formData = new FormData(); formData.append("file", file); formData.append("token", api.body.token); formData.append("authentication", api.body.authentication); $.ajax({ url: api.apiURL + 'pages/files/' + _pageKey, 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; $('#progressUploadFile').children('.progress-bar').width(percentComplete + '%'); } }, false); } return xhr; } }).done(function(response) { if (response.status == 0) { logs("File Manager. File uploaded."); // Progress bar $('#progressUploadFile').addClass('d-none'); $('#btnUploadFile').removeClass('d-none'); // Get current files fmGetFiles(); } else { logs("File Manager. An error occurred while trying to upload the file."); // Progress bar $('#progressUploadFile').children('.progress-bar').addClass('bg-danger'); // Alert the user about the error showAlertError('File Manager. ' + response.message); } }); } // Delete a file for the current page function fmDeleteFile(file) { logs('File Manager. Deleting file.'); api.deletePageFile({ 'key': _pageKey, 'file': file }).then(function(response) { if (response.status == 0) { logs("File Manager. File deleted."); // Get current files fmGetFiles(); } else { logs("File Manager. An error occurred while trying to delete the file for the current page."); showAlertError('File Manager. ' + response.message); } }); } // Initlization and events for the File Manager $(document).ready(function() { // Input file change event $('#filesToUpload').on("change", function(e) { var filesToUpload = $('#filesToUpload')[0].files; for (var i = 0; i < filesToUpload.length; i++) { fmUploadFile(filesToUpload[i]); } }); // Drag and drop files to upload them $(window).on("dragover dragenter", function(e) { e.preventDefault(); e.stopPropagation(); fmOpen(); }); $(window).on("drop", function(e) { e.preventDefault(); e.stopPropagation(); $('#filesToUpload').prop('files', e.originalEvent.dataTransfer.files); $('#filesToUpload').trigger('change'); }); }); </script>