initial commit
This commit is contained in:
@@ -0,0 +1,939 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFileManagerList = function () {
|
||||
// Define shared variables
|
||||
var datatable;
|
||||
var table
|
||||
|
||||
// Define template element variables
|
||||
var uploadTemplate;
|
||||
var renameTemplate;
|
||||
var actionTemplate;
|
||||
var checkboxTemplate;
|
||||
|
||||
|
||||
// Private functions
|
||||
const initTemplates = () => {
|
||||
uploadTemplate = document.querySelector('[data-kt-filemanager-template="upload"]');
|
||||
renameTemplate = document.querySelector('[data-kt-filemanager-template="rename"]');
|
||||
actionTemplate = document.querySelector('[data-kt-filemanager-template="action"]');
|
||||
checkboxTemplate = document.querySelector('[data-kt-filemanager-template="checkbox"]');
|
||||
}
|
||||
|
||||
const initDatatable = () => {
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const dateCol = dateRow[3]; // select date from 4th column in table
|
||||
const realDate = moment(dateCol.innerHTML, "DD MMM YYYY, LT").format();
|
||||
dateCol.setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
const foldersListOptions = {
|
||||
"info": false,
|
||||
'order': [],
|
||||
"scrollY": "700px",
|
||||
"scrollCollapse": true,
|
||||
"paging": false,
|
||||
'ordering': false,
|
||||
'columns': [
|
||||
{ data: 'checkbox' },
|
||||
{ data: 'name' },
|
||||
{ data: 'size' },
|
||||
{ data: 'date' },
|
||||
{ data: 'action' },
|
||||
],
|
||||
'language': {
|
||||
emptyTable: `<div class="d-flex flex-column flex-center">
|
||||
<img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
|
||||
<div class="fs-1 fw-bolder text-dark">No items found.</div>
|
||||
<div class="fs-6">Start creating new folders or uploading a new file!</div>
|
||||
</div>`
|
||||
}
|
||||
};
|
||||
|
||||
const filesListOptions = {
|
||||
"info": false,
|
||||
'order': [],
|
||||
'pageLength': 10,
|
||||
"lengthChange": false,
|
||||
'ordering': false,
|
||||
'columns': [
|
||||
{ data: 'checkbox' },
|
||||
{ data: 'name' },
|
||||
{ data: 'size' },
|
||||
{ data: 'date' },
|
||||
{ data: 'action' },
|
||||
],
|
||||
'language': {
|
||||
emptyTable: `<div class="d-flex flex-column flex-center">
|
||||
<img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
|
||||
<div class="fs-1 fw-bolder text-dark mb-4">No items found.</div>
|
||||
<div class="fs-6">Start creating new folders or uploading a new file!</div>
|
||||
</div>`
|
||||
},
|
||||
conditionalPaging: true
|
||||
};
|
||||
|
||||
// Define datatable options to load
|
||||
var loadOptions;
|
||||
if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
|
||||
loadOptions = foldersListOptions;
|
||||
} else {
|
||||
loadOptions = filesListOptions;
|
||||
}
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
datatable = $(table).DataTable(loadOptions);
|
||||
|
||||
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
|
||||
datatable.on('draw', function () {
|
||||
initToggleToolbar();
|
||||
handleDeleteRows();
|
||||
toggleToolbars();
|
||||
resetNewFolder();
|
||||
KTMenu.createInstances();
|
||||
initCopyLink();
|
||||
countTotalItems();
|
||||
handleRename();
|
||||
});
|
||||
}
|
||||
|
||||
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||
const handleSearchDatatable = () => {
|
||||
const filterSearch = document.querySelector('[data-kt-filemanager-table-filter="search"]');
|
||||
filterSearch.addEventListener('keyup', function (e) {
|
||||
datatable.search(e.target.value).draw();
|
||||
});
|
||||
}
|
||||
|
||||
// Delete customer
|
||||
const handleDeleteRows = () => {
|
||||
// Select all delete buttons
|
||||
const deleteButtons = table.querySelectorAll('[data-kt-filemanager-table-filter="delete_row"]');
|
||||
|
||||
deleteButtons.forEach(d => {
|
||||
// Delete button on click
|
||||
d.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Select parent row
|
||||
const parent = e.target.closest('tr');
|
||||
|
||||
// Get customer name
|
||||
const fileName = parent.querySelectorAll('td')[1].innerText;
|
||||
|
||||
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Are you sure you want to delete " + fileName + "?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, delete!",
|
||||
cancelButtonText: "No, cancel",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-danger",
|
||||
cancelButton: "btn fw-bold btn-active-light-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
text: "You have deleted " + fileName + "!.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
}).then(function () {
|
||||
// Remove current row
|
||||
datatable.row($(parent)).remove().draw();
|
||||
});
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: customerName + " was not deleted.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Init toggle toolbar
|
||||
const initToggleToolbar = () => {
|
||||
// Toggle selected action toolbar
|
||||
// Select all checkboxes
|
||||
var checkboxes = table.querySelectorAll('[type="checkbox"]');
|
||||
if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
|
||||
checkboxes = document.querySelectorAll('#kt_file_manager_list_wrapper [type="checkbox"]');
|
||||
}
|
||||
|
||||
// Select elements
|
||||
const deleteSelected = document.querySelector('[data-kt-filemanager-table-select="delete_selected"]');
|
||||
|
||||
// Toggle delete selected toolbar
|
||||
checkboxes.forEach(c => {
|
||||
// Checkbox on click event
|
||||
c.addEventListener('click', function () {
|
||||
console.log(c);
|
||||
setTimeout(function () {
|
||||
toggleToolbars();
|
||||
}, 50);
|
||||
});
|
||||
});
|
||||
|
||||
// Deleted selected rows
|
||||
deleteSelected.addEventListener('click', function () {
|
||||
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Are you sure you want to delete selected files or folders?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, delete!",
|
||||
cancelButtonText: "No, cancel",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-danger",
|
||||
cancelButton: "btn fw-bold btn-active-light-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
text: "You have deleted all selected files or folders!.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
}).then(function () {
|
||||
// Remove all selected customers
|
||||
checkboxes.forEach(c => {
|
||||
if (c.checked) {
|
||||
datatable.row($(c.closest('tbody tr'))).remove().draw();
|
||||
}
|
||||
});
|
||||
|
||||
// Remove header checked box
|
||||
const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
|
||||
headerCheckbox.checked = false;
|
||||
});
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Selected files or folders was not deleted.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Toggle toolbars
|
||||
const toggleToolbars = () => {
|
||||
// Define variables
|
||||
const toolbarBase = document.querySelector('[data-kt-filemanager-table-toolbar="base"]');
|
||||
const toolbarSelected = document.querySelector('[data-kt-filemanager-table-toolbar="selected"]');
|
||||
const selectedCount = document.querySelector('[data-kt-filemanager-table-select="selected_count"]');
|
||||
|
||||
// Select refreshed checkbox DOM elements
|
||||
const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
|
||||
|
||||
// Detect checkboxes state & count
|
||||
let checkedState = false;
|
||||
let count = 0;
|
||||
|
||||
// Count checked boxes
|
||||
allCheckboxes.forEach(c => {
|
||||
if (c.checked) {
|
||||
checkedState = true;
|
||||
count++;
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle toolbars
|
||||
if (checkedState) {
|
||||
selectedCount.innerHTML = count;
|
||||
toolbarBase.classList.add('d-none');
|
||||
toolbarSelected.classList.remove('d-none');
|
||||
} else {
|
||||
toolbarBase.classList.remove('d-none');
|
||||
toolbarSelected.classList.add('d-none');
|
||||
}
|
||||
}
|
||||
|
||||
// Handle new folder
|
||||
const handleNewFolder = () => {
|
||||
// Select button
|
||||
const newFolder = document.getElementById('kt_file_manager_new_folder');
|
||||
|
||||
// Handle click action
|
||||
newFolder.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Ignore if input already exist
|
||||
if (table.querySelector('#kt_file_manager_new_folder_row')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Add new blank row to datatable
|
||||
const tableBody = table.querySelector('tbody');
|
||||
const rowElement = uploadTemplate.cloneNode(true); // Clone template markup
|
||||
tableBody.prepend(rowElement);
|
||||
|
||||
// Define template interactive elements
|
||||
const rowForm = rowElement.querySelector('#kt_file_manager_add_folder_form');
|
||||
const rowButton = rowElement.querySelector('#kt_file_manager_add_folder');
|
||||
const cancelButton = rowElement.querySelector('#kt_file_manager_cancel_folder');
|
||||
const folderIcon = rowElement.querySelector('.svg-icon-2x');
|
||||
const rowInput = rowElement.querySelector('[name="new_folder_name"]');
|
||||
|
||||
// Define validator
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
var validator = FormValidation.formValidation(
|
||||
rowForm,
|
||||
{
|
||||
fields: {
|
||||
'new_folder_name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Folder name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Handle add new folder button
|
||||
rowButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Activate indicator
|
||||
rowButton.setAttribute("data-kt-indicator", "on");
|
||||
|
||||
// Validate form before submit
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Simulate process for demo only
|
||||
setTimeout(function () {
|
||||
// Create folder link
|
||||
const folderLink = document.createElement('a');
|
||||
const folderLinkClasses = ['text-gray-800', 'text-hover-primary'];
|
||||
folderLink.setAttribute('href', '?page=apps/file-manager/blank');
|
||||
folderLink.classList.add(...folderLinkClasses);
|
||||
folderLink.innerText = rowInput.value;
|
||||
|
||||
const newRow = datatable.row.add({
|
||||
'checkbox': checkboxTemplate.innerHTML,
|
||||
'name': folderIcon.outerHTML + folderLink.outerHTML,
|
||||
"size": '-',
|
||||
"date": '-',
|
||||
'action': actionTemplate.innerHTML
|
||||
}).node();
|
||||
$(newRow).find('td').eq(4).attr('data-kt-filemanager-table', 'action_dropdown');
|
||||
$(newRow).find('td').eq(4).addClass('text-end'); // Add custom class to last 'td' element --- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
|
||||
|
||||
// Re-sort datatable to allow new folder added at the top
|
||||
var index = datatable.row(0).index(),
|
||||
rowCount = datatable.data().length - 1,
|
||||
insertedRow = datatable.row(rowCount).data(),
|
||||
tempRow;
|
||||
|
||||
for (var i = rowCount; i > index; i--) {
|
||||
tempRow = datatable.row(i - 1).data();
|
||||
datatable.row(i).data(tempRow);
|
||||
datatable.row(i - 1).data(insertedRow);
|
||||
}
|
||||
|
||||
toastr.options = {
|
||||
"closeButton": true,
|
||||
"debug": false,
|
||||
"newestOnTop": false,
|
||||
"progressBar": false,
|
||||
"positionClass": "toastr-top-right",
|
||||
"preventDuplicates": false,
|
||||
"showDuration": "300",
|
||||
"hideDuration": "1000",
|
||||
"timeOut": "5000",
|
||||
"extendedTimeOut": "1000",
|
||||
"showEasing": "swing",
|
||||
"hideEasing": "linear",
|
||||
"showMethod": "fadeIn",
|
||||
"hideMethod": "fadeOut"
|
||||
};
|
||||
|
||||
toastr.success(rowInput.value + ' was created!');
|
||||
|
||||
// Disable indicator
|
||||
rowButton.removeAttribute("data-kt-indicator");
|
||||
|
||||
// Reset input
|
||||
rowInput.value = '';
|
||||
|
||||
datatable.draw(false);
|
||||
|
||||
}, 2000);
|
||||
} else {
|
||||
// Disable indicator
|
||||
rowButton.removeAttribute("data-kt-indicator");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Handle cancel new folder button
|
||||
cancelButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Activate indicator
|
||||
cancelButton.setAttribute("data-kt-indicator", "on");
|
||||
|
||||
setTimeout(function () {
|
||||
// Disable indicator
|
||||
cancelButton.removeAttribute("data-kt-indicator");
|
||||
|
||||
// Toggle toastr
|
||||
toastr.options = {
|
||||
"closeButton": true,
|
||||
"debug": false,
|
||||
"newestOnTop": false,
|
||||
"progressBar": false,
|
||||
"positionClass": "toastr-top-right",
|
||||
"preventDuplicates": false,
|
||||
"showDuration": "300",
|
||||
"hideDuration": "1000",
|
||||
"timeOut": "5000",
|
||||
"extendedTimeOut": "1000",
|
||||
"showEasing": "swing",
|
||||
"hideEasing": "linear",
|
||||
"showMethod": "fadeIn",
|
||||
"hideMethod": "fadeOut"
|
||||
};
|
||||
|
||||
toastr.error('Cancelled new folder creation');
|
||||
resetNewFolder();
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Reset add new folder input
|
||||
const resetNewFolder = () => {
|
||||
const newFolderRow = table.querySelector('#kt_file_manager_new_folder_row');
|
||||
|
||||
if (newFolderRow) {
|
||||
newFolderRow.parentNode.removeChild(newFolderRow);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle rename file or folder
|
||||
const handleRename = () => {
|
||||
const renameButton = table.querySelectorAll('[data-kt-filemanager-table="rename"]');
|
||||
|
||||
renameButton.forEach(button => {
|
||||
button.addEventListener('click', renameCallback);
|
||||
});
|
||||
}
|
||||
|
||||
// Rename callback
|
||||
const renameCallback = (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Define shared value
|
||||
let nameValue;
|
||||
|
||||
// Stop renaming if there's an input existing
|
||||
if (table.querySelectorAll('#kt_file_manager_rename_input').length > 0) {
|
||||
Swal.fire({
|
||||
text: "Unsaved input detected. Please save or cancel the current item",
|
||||
icon: "warning",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-danger"
|
||||
}
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Select parent row
|
||||
const parent = e.target.closest('tr');
|
||||
|
||||
// Get name column
|
||||
const nameCol = parent.querySelectorAll('td')[1];
|
||||
const colIcon = nameCol.querySelector('.svg-icon');
|
||||
nameValue = nameCol.innerText;
|
||||
|
||||
// Set rename input template
|
||||
const renameInput = renameTemplate.cloneNode(true);
|
||||
renameInput.querySelector('#kt_file_manager_rename_folder_icon').innerHTML = colIcon.outerHTML;
|
||||
|
||||
// Swap current column content with input template
|
||||
nameCol.innerHTML = renameInput.innerHTML;
|
||||
|
||||
// Set input value with current file/folder name
|
||||
parent.querySelector('#kt_file_manager_rename_input').value = nameValue;
|
||||
|
||||
// Rename file / folder validator
|
||||
var renameValidator = FormValidation.formValidation(
|
||||
nameCol,
|
||||
{
|
||||
fields: {
|
||||
'rename_folder_name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Rename input button action
|
||||
const renameInputButton = document.querySelector('#kt_file_manager_rename_folder');
|
||||
renameInputButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Detect if valid
|
||||
if (renameValidator) {
|
||||
renameValidator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Pop up confirmation
|
||||
Swal.fire({
|
||||
text: "Are you sure you want to rename " + nameValue + "?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, rename it!",
|
||||
cancelButtonText: "No, cancel",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-danger",
|
||||
cancelButton: "btn fw-bold btn-active-light-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
text: "You have renamed " + nameValue + "!.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
}).then(function () {
|
||||
// Get new file / folder name value
|
||||
const newValue = document.querySelector('#kt_file_manager_rename_input').value;
|
||||
|
||||
// New column data template
|
||||
const newData = `<div class="d-flex align-items-center">
|
||||
${colIcon.outerHTML}
|
||||
<a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${newValue}</a>
|
||||
</div>`;
|
||||
|
||||
// Draw datatable with new content -- Add more events here for any server-side events
|
||||
datatable.cell($(nameCol)).data(newData).draw();
|
||||
});
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: nameValue + " was not renamed.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Cancel rename input
|
||||
const cancelInputButton = document.querySelector('#kt_file_manager_rename_folder_cancel');
|
||||
cancelInputButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Simulate process for demo only
|
||||
cancelInputButton.setAttribute("data-kt-indicator", "on");
|
||||
|
||||
setTimeout(function () {
|
||||
const revertTemplate = `<div class="d-flex align-items-center">
|
||||
${colIcon.outerHTML}
|
||||
<a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${nameValue}</a>
|
||||
</div>`;
|
||||
|
||||
// Remove spinner
|
||||
cancelInputButton.removeAttribute("data-kt-indicator");
|
||||
|
||||
// Draw datatable with new content -- Add more events here for any server-side events
|
||||
datatable.cell($(nameCol)).data(revertTemplate).draw();
|
||||
|
||||
// Toggle toastr
|
||||
toastr.options = {
|
||||
"closeButton": true,
|
||||
"debug": false,
|
||||
"newestOnTop": false,
|
||||
"progressBar": false,
|
||||
"positionClass": "toastr-top-right",
|
||||
"preventDuplicates": false,
|
||||
"showDuration": "300",
|
||||
"hideDuration": "1000",
|
||||
"timeOut": "5000",
|
||||
"extendedTimeOut": "1000",
|
||||
"showEasing": "swing",
|
||||
"hideEasing": "linear",
|
||||
"showMethod": "fadeIn",
|
||||
"hideMethod": "fadeOut"
|
||||
};
|
||||
|
||||
toastr.error('Cancelled rename function');
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// Init dropzone
|
||||
const initDropzone = () => {
|
||||
// set the dropzone container id
|
||||
const id = "#kt_modal_upload_dropzone";
|
||||
const dropzone = document.querySelector(id);
|
||||
|
||||
// set the preview element template
|
||||
var previewNode = dropzone.querySelector(".dropzone-item");
|
||||
previewNode.id = "";
|
||||
var previewTemplate = previewNode.parentNode.innerHTML;
|
||||
previewNode.parentNode.removeChild(previewNode);
|
||||
|
||||
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
|
||||
url: "path/to/your/server", // Set the url for your upload script location
|
||||
parallelUploads: 10,
|
||||
previewTemplate: previewTemplate,
|
||||
maxFilesize: 1, // Max filesize in MB
|
||||
autoProcessQueue: false, // Stop auto upload
|
||||
autoQueue: false, // Make sure the files aren't queued until manually added
|
||||
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
|
||||
clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
|
||||
});
|
||||
|
||||
myDropzone.on("addedfile", function (file) {
|
||||
// Hook each start button
|
||||
file.previewElement.querySelector(id + " .dropzone-start").onclick = function () {
|
||||
// myDropzone.enqueueFile(file); -- default dropzone function
|
||||
|
||||
// Process simulation for demo only
|
||||
const progressBar = file.previewElement.querySelector('.progress-bar');
|
||||
progressBar.style.opacity = "1";
|
||||
var width = 1;
|
||||
var timer = setInterval(function () {
|
||||
if (width >= 100) {
|
||||
myDropzone.emit("success", file);
|
||||
myDropzone.emit("complete", file);
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
width++;
|
||||
progressBar.style.width = width + '%';
|
||||
}
|
||||
}, 20);
|
||||
};
|
||||
|
||||
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
|
||||
dropzoneItems.forEach(dropzoneItem => {
|
||||
dropzoneItem.style.display = '';
|
||||
});
|
||||
dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
|
||||
dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
|
||||
});
|
||||
|
||||
// Hide the total progress bar when nothing's uploading anymore
|
||||
myDropzone.on("complete", function (file) {
|
||||
const progressBars = dropzone.querySelectorAll('.dz-complete');
|
||||
setTimeout(function () {
|
||||
progressBars.forEach(progressBar => {
|
||||
progressBar.querySelector('.progress-bar').style.opacity = "0";
|
||||
progressBar.querySelector('.progress').style.opacity = "0";
|
||||
progressBar.querySelector('.dropzone-start').style.opacity = "0";
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Setup the buttons for all transfers
|
||||
dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
|
||||
// myDropzone.processQueue(); --- default dropzone process
|
||||
|
||||
// Process simulation for demo only
|
||||
myDropzone.files.forEach(file => {
|
||||
const progressBar = file.previewElement.querySelector('.progress-bar');
|
||||
progressBar.style.opacity = "1";
|
||||
var width = 1;
|
||||
var timer = setInterval(function () {
|
||||
if (width >= 100) {
|
||||
myDropzone.emit("success", file);
|
||||
myDropzone.emit("complete", file);
|
||||
clearInterval(timer);
|
||||
} else {
|
||||
width++;
|
||||
progressBar.style.width = width + '%';
|
||||
}
|
||||
}, 20);
|
||||
});
|
||||
});
|
||||
|
||||
// Setup the button for remove all files
|
||||
dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to remove all files?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, remove it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
dropzone.querySelector('.dropzone-upload').style.display = "none";
|
||||
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
|
||||
myDropzone.removeAllFiles(true);
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your files was not removed!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// On all files completed upload
|
||||
myDropzone.on("queuecomplete", function (progress) {
|
||||
const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
|
||||
uploadIcons.forEach(uploadIcon => {
|
||||
uploadIcon.style.display = "none";
|
||||
});
|
||||
});
|
||||
|
||||
// On all files removed
|
||||
myDropzone.on("removedfile", function (file) {
|
||||
if (myDropzone.files.length < 1) {
|
||||
dropzone.querySelector('.dropzone-upload').style.display = "none";
|
||||
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Init copy link
|
||||
const initCopyLink = () => {
|
||||
// Select all copy link elements
|
||||
const elements = table.querySelectorAll('[data-kt-filemanger-table="copy_link"]');
|
||||
|
||||
elements.forEach(el => {
|
||||
// Define elements
|
||||
const button = el.querySelector('button');
|
||||
const generator = el.querySelector('[data-kt-filemanger-table="copy_link_generator"]');
|
||||
const result = el.querySelector('[data-kt-filemanger-table="copy_link_result"]');
|
||||
const input = el.querySelector('input');
|
||||
|
||||
// Click action
|
||||
button.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Reset toggle
|
||||
generator.classList.remove('d-none');
|
||||
result.classList.add('d-none');
|
||||
|
||||
var linkTimeout;
|
||||
clearTimeout(linkTimeout);
|
||||
linkTimeout = setTimeout(() => {
|
||||
generator.classList.add('d-none');
|
||||
result.classList.remove('d-none');
|
||||
input.select();
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Handle move to folder
|
||||
const handleMoveToFolder = () => {
|
||||
const element = document.querySelector('#kt_modal_move_to_folder');
|
||||
const form = element.querySelector('#kt_modal_move_to_folder_form');
|
||||
const saveButton = form.querySelector('#kt_modal_move_to_folder_submit');
|
||||
const moveModal = new bootstrap.Modal(element);
|
||||
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
var validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'move_to_folder': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Please select a folder.'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
saveButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
saveButton.setAttribute("data-kt-indicator", "on");
|
||||
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Simulate process for demo only
|
||||
setTimeout(function () {
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to move to this folder",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, move it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
form.reset(); // Reset form
|
||||
moveModal.hide(); // Hide modal
|
||||
|
||||
toastr.options = {
|
||||
"closeButton": true,
|
||||
"debug": false,
|
||||
"newestOnTop": false,
|
||||
"progressBar": false,
|
||||
"positionClass": "toastr-top-right",
|
||||
"preventDuplicates": false,
|
||||
"showDuration": "300",
|
||||
"hideDuration": "1000",
|
||||
"timeOut": "5000",
|
||||
"extendedTimeOut": "1000",
|
||||
"showEasing": "swing",
|
||||
"hideEasing": "linear",
|
||||
"showMethod": "fadeIn",
|
||||
"hideMethod": "fadeOut"
|
||||
};
|
||||
|
||||
toastr.success('1 item has been moved.');
|
||||
|
||||
saveButton.removeAttribute("data-kt-indicator");
|
||||
} else {
|
||||
Swal.fire({
|
||||
text: "Your action has been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
|
||||
saveButton.removeAttribute("data-kt-indicator");
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
} else {
|
||||
saveButton.removeAttribute("data-kt-indicator");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Count total number of items
|
||||
const countTotalItems = () => {
|
||||
const counter = document.getElementById('kt_file_manager_items_counter');
|
||||
|
||||
// Count total number of elements in datatable --- more info: https://datatables.net/reference/api/count()
|
||||
counter.innerText = datatable.rows().count() + ' items';
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
table = document.querySelector('#kt_file_manager_list');
|
||||
|
||||
if (!table) {
|
||||
return;
|
||||
}
|
||||
|
||||
initTemplates();
|
||||
initDatatable();
|
||||
initToggleToolbar();
|
||||
handleSearchDatatable();
|
||||
handleDeleteRows();
|
||||
handleNewFolder();
|
||||
initDropzone();
|
||||
initCopyLink();
|
||||
handleRename();
|
||||
handleMoveToFolder();
|
||||
countTotalItems();
|
||||
KTMenu.createInstances();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFileManagerList.init();
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAppFileManagerSettings = function () {
|
||||
var form;
|
||||
|
||||
// Private functions
|
||||
var handleForm = function() {
|
||||
const saveButton = form.querySelector('#kt_file_manager_settings_submit');
|
||||
|
||||
saveButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
saveButton.setAttribute("data-kt-indicator", "on");
|
||||
|
||||
// Simulate process for demo only
|
||||
setTimeout(function(){
|
||||
toastr.options = {
|
||||
"closeButton": true,
|
||||
"debug": false,
|
||||
"newestOnTop": false,
|
||||
"progressBar": false,
|
||||
"positionClass": "toast-top-right",
|
||||
"preventDuplicates": false,
|
||||
"showDuration": "300",
|
||||
"hideDuration": "1000",
|
||||
"timeOut": "5000",
|
||||
"extendedTimeOut": "1000",
|
||||
"showEasing": "swing",
|
||||
"hideEasing": "linear",
|
||||
"showMethod": "fadeIn",
|
||||
"hideMethod": "fadeOut"
|
||||
};
|
||||
|
||||
toastr.success('File manager settings have been saved');
|
||||
|
||||
saveButton.removeAttribute("data-kt-indicator");
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function(element) {
|
||||
form = document.querySelector('#kt_file_manager_settings');
|
||||
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTAppFileManagerSettings.init();
|
||||
});
|
||||
Reference in New Issue
Block a user