From 228d6bbd887aef6fe3a81eb22d612a60cecb4c22 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 8 Jul 2025 14:45:17 +0100
Subject: [PATCH 1/3] update file manager for v7

---
 composer.json                                 |   2 +-
 readme.md                                     |  10 +-
 .../assets/css/elfinder.backpack.theme.css    | 127 ------------------
 resources/views/ckeditor4.blade.php           |  67 ---------
 resources/views/ckeditor4.php                 |  83 ------------
 resources/views/common_scripts.blade.php      |  40 +++---
 resources/views/common_styles.blade.php       |  42 +++---
 resources/views/elfinder.blade.php            |   4 +-
 resources/views/elfinder.php                  |  72 ----------
 resources/views/filepicker.blade.php          |  88 ------------
 resources/views/filepicker.php                | 106 ---------------
 resources/views/standalonepopup.blade.php     |   4 +-
 resources/views/standalonepopup.php           |  82 -----------
 resources/views/tinymce.blade.php             |  89 ------------
 resources/views/tinymce.php                   | 105 ---------------
 resources/views/tinymce4.blade.php            |  71 ----------
 resources/views/tinymce4.php                  |  86 ------------
 resources/views/tinymce5.blade.php            |  55 --------
 resources/views/tinymce5.php                  |  87 ------------
 src/BackpackElfinderController.php            |   9 +-
 src/Console/Commands/Install.php              |   5 +-
 src/FileManagerServiceProvider.php            |  10 +-
 22 files changed, 80 insertions(+), 1164 deletions(-)
 delete mode 100644 resources/assets/css/elfinder.backpack.theme.css
 delete mode 100644 resources/views/ckeditor4.blade.php
 delete mode 100644 resources/views/ckeditor4.php
 delete mode 100644 resources/views/elfinder.php
 delete mode 100644 resources/views/filepicker.blade.php
 delete mode 100644 resources/views/filepicker.php
 delete mode 100644 resources/views/standalonepopup.php
 delete mode 100644 resources/views/tinymce.blade.php
 delete mode 100644 resources/views/tinymce.php
 delete mode 100644 resources/views/tinymce4.blade.php
 delete mode 100644 resources/views/tinymce4.php
 delete mode 100644 resources/views/tinymce5.blade.php
 delete mode 100644 resources/views/tinymce5.php

diff --git a/composer.json b/composer.json
index 0ba44c8..e99b2d1 100644
--- a/composer.json
+++ b/composer.json
@@ -12,7 +12,7 @@
     "homepage": "https://github.com/laravel-backpack/filemanager",
     "keywords": ["Laravel", "FileManager"],
     "require": {
-        "backpack/crud": "^7.0.0-alpha",
+        "backpack/crud": "^7.0.0-beta",
         "barryvdh/laravel-elfinder": "^0.5.2"
     },
     "require-dev": {
diff --git a/readme.md b/readme.md
index 1ae23f1..af91d95 100644
--- a/readme.md
+++ b/readme.md
@@ -34,7 +34,15 @@ That's it. Hit refresh in your admin panel, and you'll find a new sidebar item p
 
 You can use elFinder in Backpack:
 - stand-alone, by accessing the ```/admin/elfinder``` route (see screenshot above);
-- inside the [```browse```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse), [```browse_multiple```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse_multiple) or [```ckeditor```](https://backpackforlaravel.com/docs/4.1/crud-fields#ckeditor) field types;
+- inside the [```browse```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse), [```browse_multiple```](https://backpackforlaravel.com/docs/4.1/crud-fields#browse_multiple);
+
+## Customization
+
+You can publish the views to your `resources/views/vendor/backpack/filemanager` folder by running:
+
+```bash
+php vendor:publish --provider="Backpack\FileManager\FileManagerServiceProvider" --tag="views"
+```
 
 ## Upgrade
 
diff --git a/resources/assets/css/elfinder.backpack.theme.css b/resources/assets/css/elfinder.backpack.theme.css
deleted file mode 100644
index 10c1fee..0000000
--- a/resources/assets/css/elfinder.backpack.theme.css
+++ /dev/null
@@ -1,127 +0,0 @@
-/**
- * Laravel Backpack theme for elFinder.
- * Required jquery ui "smoothness" theme.
- *
- * @author Cristian Tabacitu [hello@tabacitu.ro]
- **/
-
-body.elfinder { margin:0; }
-body #elfinder.ui-widget-content { 
-    border: 1px solid #cccccc;
-    background: #ffffff;
-    color: #23282c;
-    border-radius: 3px!important;
-}
-
-.elfinder-cwd-icon:before {
-	background: #ccc;
-}
-
-#elfinder .ui-state-default, 
-#elfinder .ui-widget-content .ui-state-default, 
-#elfinder .ui-widget-header .ui-state-default {
-	background: #e6e6e6;
-}
-
-.elfinder-contextmenu .ui-state-hover {
-	color: black!important;
-}
-
-.elfinder-cwd-file.ui-state-hover, 
-.elfinder-cwd-file.ui-widget-content .ui-state-hover, 
-.elfinder-cwd-file.ui-widget-header .ui-state-hover, 
-.elfinder-cwd-file.ui-state-focus, 
-.elfinder-cwd-file.ui-widget-content .ui-state-focus, 
-.elfinder-cwd-file.ui-widget-header .ui-state-focus {
-	background: transparent!important;
-	/*border: 1px solid #ccc;*/
-}
-
-.elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-filename.ui-state-hover, 
-.elfinder-cwd table td.ui-state-hover, 
-.elfinder-button-menu .ui-state-hover {
-	/*color: black!important;*/
-	/*font-weight: bold;*/
-}
-
-.elfinder .elfinder-contextmenu, .elfinder .elfinder-contextmenu-sub {
-	border: 1px solid #ccc!important;
-}
-
-/* input textarea */
-.elfinder input,
-.elfinder textarea {
-	color: #000;
-	background-color: #FFF;
-}
-
-/* dialogs */
-.std42-dialog, .std42-dialog .ui-widget-content { background-color:#ededed; background-image:none; background-clip: content-box; }
-
-/* navbar */
-.elfinder .elfinder-navbar { background:#dde4eb; }
-.elfinder-navbar .ui-state-hover  { color:#000; background-color:#edf1f4; border-color:#bdcbd8; }
-.elfinder-navbar-root.ui-state-active.ui-state-hover  { color:white; background: #3875d7!important;  }
-.elfinder-navbar .ui-state-active { background: #3875d7;    border-color:#3875d7; color:#fff; }
-.elfinder-navbar .elfinder-droppable-active {background:#A7C6E5 !important;}
-/* disabled elfinder */
-.elfinder-disabled .elfinder-navbar .ui-state-active { background: #dadada; border-color:#aaa; color:#fff; }
-
-
-/* current directory */
-/* selected file in "icons" view */
-.elfinder-cwd-view-icons .elfinder-cwd-file .ui-state-hover { background:#ccc; }
-
-/* list view*/
-.elfinder-cwd table thead td.ui-state-hover { background:#ddd; }
-.elfinder-cwd table tr:nth-child(odd) { background-color:#edf3fe; }
-.elfinder-cwd table tr {
-	border: 1px solid transparent;
-	border-top:1px solid #fff;
-}
-.elfinder-cwd .elfinder-droppable-active td { background:#A7C6E5 !important; }
-
-
-/* common selected background/color */
-.elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-filename.ui-state-hover,
-.elfinder-cwd table td.ui-state-hover,
-.elfinder-button-menu .ui-state-hover { background: #3875d7; color:#fff;}
-/* disabled elfinder */
-.elfinder-disabled .elfinder-cwd-view-icons .elfinder-cwd-file .elfinder-cwd-filename.ui-state-hover,
-.elfinder-disabled .elfinder-cwd table td.ui-state-hover { background:#dadada;}
-
-/* statusbar */
-.elfinder .elfinder-statusbar { color:#555; }
-.elfinder .elfinder-statusbar a { text-decoration:none; color:#555;}
-
-
-.std42-dialog .elfinder-help, .std42-dialog .elfinder-help .ui-widget-content { background:#fff;}
-
-/* contextmenu */
-.elfinder-contextmenu .ui-state-hover { background: #3875d7; color:#fff; }
-/* .elfinder-contextmenu .ui-state-hover .elfinder-contextmenu-arrow { background-image:url('../img/arrows-active.png'); } */
-
-/* jquery-ui overwrites */
-.ui-widget-header {
-	background: #cccccc;
-	border: none;
-}
-
-.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
-	border-bottom-right-radius: 0;
-}
-.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
-	border-bottom-left-radius: 0;
-}
-.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
-	border-top-right-radius: 0;
-}
-.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
-	border-top-left-radius: 0;
-}
-.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
-	background: #dadada;
-}
-.elfinder-navbar-root .ui-state-hover {
-	background: #3875d7!important;
-}
\ No newline at end of file
diff --git a/resources/views/ckeditor4.blade.php b/resources/views/ckeditor4.blade.php
deleted file mode 100644
index 0e47561..0000000
--- a/resources/views/ckeditor4.blade.php
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ app()->getLocale() }}">
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript" charset="utf-8">
-            // Helper function to get parameters from the query string.
-            function getUrlParam(paramName) {
-                var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
-                var match = window.location.search.match(reParam) ;
-
-                return (match && match.length > 1) ? match[1] : '' ;
-            }
-
-            $().ready(function() {
-                var funcNum = getUrlParam('CKEditorFuncNum');
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: { 
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url: '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    getFileCallback : function(file) {
-                        window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
-                        window.close();
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/ckeditor4.php b/resources/views/ckeditor4.php
deleted file mode 100644
index 5191c12..0000000
--- a/resources/views/ckeditor4.php
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript" charset="utf-8">
-            // Helper function to get parameters from the query string.
-            function getUrlParam(paramName) {
-                var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
-                var match = window.location.search.match(reParam) ;
-
-                return (match && match.length > 1) ? match[1] : '' ;
-            }
-
-            $().ready(function() {
-                var funcNum = getUrlParam('CKEditorFuncNum');
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    getFileCallback : function(file) {
-                        window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
-                        window.close();
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-            <!-- Element where elFinder will be created (REQUIRED) -->
-            <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/common_scripts.blade.php b/resources/views/common_scripts.blade.php
index 650218f..5521b3e 100644
--- a/resources/views/common_scripts.blade.php
+++ b/resources/views/common_scripts.blade.php
@@ -1,21 +1,27 @@
-        {{-- jQuery (REQUIRED) --}}
-        @if (!isset ($jquery) || (isset($jquery) && $jquery == true))
-        @basset('https://unpkg.com/jquery@3.6.1/dist/jquery.min.js')
-        @endif
+{{-- jQuery (REQUIRED) --}}
+@if (!isset ($jquery) || (isset($jquery) && $jquery == true))
+	@basset('https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js', true, [
+		'integrity' => 'sha384-Vvooey8iu18IIP2UsBgOl+DI0kQR66LQqPBthxB5y4YqaRgugWOu+vaqwY/AGNAb', 
+		'crossorigin' => 'anonymous'
+	])
+@endif
 
-        {{-- jQuery UI and Smoothness theme --}}
-        @bassetArchive('https://github.com/jquery/jquery-ui/archive/refs/tags/1.13.2.tar.gz', 'jquery-ui-1.13.2')
-        @basset('jquery-ui-1.13.2/jquery-ui-1.13.2/dist/themes/smoothness/jquery-ui.min.css')
-        @basset('jquery-ui-1.13.2/jquery-ui-1.13.2/dist/jquery-ui.min.js')
+{{-- jQuery UI and Smoothness theme --}}
+@basset('https://raw.githubusercontent.com/jquery/jquery-ui/refs/tags/1.13.2/dist/jquery-ui.min.js', true, [
+	'integrity' => 'sha384-4D3G3GikQs6hLlLZGdz5wLFzuqE9v4yVGAcOH86y23JqBDPzj9viv0EqyfIa6YUL', 
+	'crossorigin' => 'anonymous'
+])
 
-        {{-- elFinder JS (REQUIRED) --}}
-        @bassetArchive('https://github.com/Studio-42/elFinder/archive/refs/tags/2.1.64.tar.gz', 'elfinder-2.1.64')
-        @basset('elfinder-2.1.64/elFinder-2.1.64/js/elfinder.min.js')
+{{-- elFinder JS (REQUIRED) --}}
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/js/elfinder.min.js', true, [
+	'integrity' => 'sha384-Ow1wKIUQLS9bOa23gn7yT91nyowDhk2zK1lO7G5Hnxlh3bvTPNH7c5uODf7/jIec', 
+	'crossorigin' => 'anonymous'
+])
 
-        {{-- elFinder translation (OPTIONAL) --}}
-        @if($locale)
-        @basset('https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.64/js/i18n/elfinder.'.$locale.'.min.js')
-        @endif
+{{-- elFinder translation (OPTIONAL) --}}
+@if($locale)
+	@basset('bp-elfinder-i18n-'.$locale)
+@endif
 
-        {{-- elFinder sounds --}}
-        @basset(base_path('vendor/studio-42/elfinder/sounds/rm.wav'))
+{{-- elFinder sounds --}}
+@basset(base_path('vendor/studio-42/elfinder/sounds/rm.wav'))
diff --git a/resources/views/common_styles.blade.php b/resources/views/common_styles.blade.php
index cabe921..81b1f49 100644
--- a/resources/views/common_styles.blade.php
+++ b/resources/views/common_styles.blade.php
@@ -1,28 +1,32 @@
 <meta charset="utf-8">
 <title>File Manager</title>
 {{-- elFinder CSS (REQUIRED) --}}
-@php
-    $themeStylesheetVersion = '3.0.0';
-@endphp
-@bassetArchive('https://github.com/Studio-42/elFinder/archive/refs/tags/2.1.64.tar.gz', 'elfinder-2.1.64')
-@basset('elfinder-2.1.64/elFinder-2.1.64/css/elfinder.min.css')
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/css/theme.min.css')
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/images/loading.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.eot', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/images/icons-big.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/images/icons-small.svg', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.woff', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.ttf', false)
-@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/font/material.woff2', false)
-
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/img/icons-big.svg', true, [
+    'integrity' => 'sha384-BWeb84E4ly6GgjPMWRpJNB+I8XpW+xqF9kezQR6PNqXP0pmjHi8iqlGZs0JRgHlu', 
+    'crossorigin' => 'anonymous'
+])
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/img/logo.png', true, [
+    'integrity' => 'sha384-mAtths5Wl6rU0MrgaCz2bJRTIG8LhA1pLZ4ZX+Qo9fQRjlKFxb5eLWUO3pZ7Aioq', 
+    'crossorigin' => 'anonymous'
+])
+@basset('https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/css/elfinder.min.css', true, [
+    'integrity' => 'sha384-O+x3Lv203m3W8SILSSf8xt2ryvN+CEx3s9tpGloi3D6UQ+1BkbXPuSxEj7uhKKCs', 
+    'crossorigin' => 'anonymous'
+])
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme.min.css')
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/images/loading.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.eot', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/images/icons-big.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/images/icons-small.svg', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.woff', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.ttf', false)
+@basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/font/material.woff2', false)
 @bassetBlock('elfinderThemeSwitcherScript.js')
 <script type="text/javascript">
 document.addEventListener('DOMContentLoaded', function() {
     function getElfinderStyleSheet(main = true) {
-        let themeStylesheetVersion = '{{$themeStylesheetVersion}}';
-        const regex =  new RegExp(main ? `RobiNN1\/elFinder-Material-Theme@${themeStylesheetVersion}\/Material\/css\/theme\.min\.css` : `RobiNN1\/elFinder-Material-Theme@${themeStylesheetVersion}\/Material\/css\/theme-gray\.min\.css`);
-        const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
+    const regex = new RegExp(main ? `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme\.min\.css` : `RobiNN1\/elFinder-Material-Theme@3.0.0\/Material\/css\/theme-gray\.min\.css`);        const linkElements = document.querySelectorAll('link[rel="stylesheet"]');
         // Find the main elfinder stylesheet
         let selectedLinkElement;
         for (const linkElement of linkElements) {
@@ -35,7 +39,7 @@ function getElfinderStyleSheet(main = true) {
     }
 
     function addElfinderLightStylesheet() {
-        let themeLightAsset = `{{ Basset::basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@'.$themeStylesheetVersion.'/Material/css/theme-gray.min.css') }}`;
+        let themeLightAsset = `{{ Basset::basset('https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme@3.0.0/Material/css/theme-gray.min.css') }}`;
         const match = themeLightAsset.match(/<link\s+href="([^"]+)"/i);
         if (match && match.length > 1) {
             let mainStyleSheet = getElfinderStyleSheet();
diff --git a/resources/views/elfinder.blade.php b/resources/views/elfinder.blade.php
index 7308e48..f5825ab 100644
--- a/resources/views/elfinder.blade.php
+++ b/resources/views/elfinder.blade.php
@@ -2,8 +2,8 @@
 
 @section('after_scripts')
 
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
+        @include('backpack.elfinder::common_scripts')
+        @include('backpack.elfinder::common_styles')
 
         <!-- elFinder initialization (REQUIRED) -->
         <script type="text/javascript" charset="utf-8">
diff --git a/resources/views/elfinder.php b/resources/views/elfinder.php
deleted file mode 100644
index bb1b1f6..0000000
--- a/resources/views/elfinder.php
+++ /dev/null
@@ -1,72 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-        <!-- elFinder translation (OPTIONAL) -->
-        <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript" charset="utf-8">
-            // Documentation for client options:
-            // https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
-            $().ready(function() {
-                var theme = 'default';
-
-                $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url : '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                });
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/filepicker.blade.php b/resources/views/filepicker.blade.php
deleted file mode 100644
index d8a1698..0000000
--- a/resources/views/filepicker.blade.php
+++ /dev/null
@@ -1,88 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ app()->getLocale() }}">
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-        
-        <script type="text/javascript">
-            $().ready(function () {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: {
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url: '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    resizable: false,
-                    ui: ['toolbar', 'path','stat'],
-                    onlyMimes: [{{ $mimeTypes }}],
-                    rememberLastDir : false,
-                    height: 300,
-                    defaultView: 'list',
-                    getFileCallback: function (file) {
-                        window.parent.processSelectedFile(file, '{{ $input_id }}');
-                        console.log(file);
-                    },
-                    uiOptions : {
-                        // toolbar configuration
-                        toolbar : [
-                            ['home', 'up'],
-                            ['upload'],
-                            ['quicklook'],
-                        ],
-                        // directories tree options
-                        tree : {
-                            // expand current root on init
-                            openRootOnLoad : true,
-                            // auto load current dir parents
-                            syncTree : true
-                        },
-                        // navbar options
-                        navbar : {
-                            minWidth : 150,
-                            maxWidth : 500
-                        },
-                        // current working directory options
-                        cwd : {
-                            // display parent directory in listing as ".."
-                            oldSchool : false
-                        }
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body style="margin: 0;">
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/filepicker.php b/resources/views/filepicker.php
deleted file mode 100644
index bf0dda0..0000000
--- a/resources/views/filepicker.php
+++ /dev/null
@@ -1,106 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css">
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        <!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
-
-        <script type="text/javascript">
-            $().ready(function () {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: {
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    resizable: false,
-                    ui: ['toolbar', 'path','stat'],
-                    onlyMimes: [<?= $mimeTypes ?>],
-                    rememberLastDir : false,
-                    height: 300,
-                    defaultView: 'list',
-                    getFileCallback: function (file) {
-                        window.parent.processSelectedFile(file, '<?= $input_id?>');
-                        console.log(file);
-                    },
-                    uiOptions : {
-                        // toolbar configuration
-                        toolbar : [
-                            ['home', 'up'],
-                            ['upload'],
-                            ['quicklook'],
-                        ],
-                        // directories tree options
-                        tree : {
-                            // expand current root on init
-                            openRootOnLoad : true,
-                            // auto load current dir parents
-                            syncTree : true
-                        },
-                        // navbar options
-                        navbar : {
-                            minWidth : 150,
-                            maxWidth : 500
-                        },
-                        // current working directory options
-                        cwd : {
-                            // display parent directory in listing as ".."
-                            oldSchool : false
-                        }
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body style="margin: 0;">
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/standalonepopup.blade.php b/resources/views/standalonepopup.blade.php
index 0276d71..ba3b07b 100644
--- a/resources/views/standalonepopup.blade.php
+++ b/resources/views/standalonepopup.blade.php
@@ -2,8 +2,8 @@
 <html lang="{{ app()->getLocale() }}">
     <head>
         
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles', ['styleBodyElement' => true])
+        @include('backpack.elfinder::common_scripts')
+        @include('backpack.elfinder::common_styles', ['styleBodyElement' => true])
         <style type="text/css">
         .elfinder-workzone {
             min-height: max-content !important;
diff --git a/resources/views/standalonepopup.php b/resources/views/standalonepopup.php
deleted file mode 100644
index 7e8f4e8..0000000
--- a/resources/views/standalonepopup.php
+++ /dev/null
@@ -1,82 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css">
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        <!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
-
-        <script type="text/javascript">
-            $().ready(function () {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    dialog: {width: 900, modal: true, title: 'Select a file'},
-                    resizable: false,
-                    commandsOptions: {
-                        getfile: {
-                            oncomplete: 'destroy'
-                        }
-                    },
-                    getFileCallback: function (file) {
-                        window.parent.processSelectedFile(file.path, '<?= $input_id?>');
-                        parent.jQuery.colorbox.close();
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce.blade.php b/resources/views/tinymce.blade.php
deleted file mode 100644
index ee70061..0000000
--- a/resources/views/tinymce.blade.php
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html lang="{{ app()->getLocale() }}">
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-
-        <!-- TinyMCE Popup class (REQUIRED) -->
-        <script type="text/javascript" src="{{ asset($dir.'/js/tiny_mce_popup.js') }}"></script>
-
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    var win = tinyMCEPopup.getWindowArg('window');
-
-                    // pass selected file path to TinyMCE
-                    win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;
-
-                    // are we an image browser?
-                    if (typeof(win.ImageDialog) != 'undefined') {
-                        // update image dimensions
-                        if (win.ImageDialog.getImageData) {
-                            win.ImageDialog.getImageData();
-                        }
-                        // update preview if necessary
-                        if (win.ImageDialog.showPreviewImage) {
-                            win.ImageDialog.showPreviewImage(URL);
-                        }
-                    }
-
-                    // close popup window
-                    tinyMCEPopup.close();
-                }
-            }
-
-            tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: { 
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url : '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce.php b/resources/views/tinymce.php
deleted file mode 100644
index ccf17f4..0000000
--- a/resources/views/tinymce.php
+++ /dev/null
@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <!-- TinyMCE Popup class (REQUIRED) -->
-        <script type="text/javascript" src="<?= asset($dir.'/js/tiny_mce_popup.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    var win = tinyMCEPopup.getWindowArg('window');
-
-                    // pass selected file path to TinyMCE
-                    win.document.getElementById(tinyMCEPopup.getWindowArg('input')).value = URL;
-
-                    // are we an image browser?
-                    if (typeof(win.ImageDialog) != 'undefined') {
-                        // update image dimensions
-                        if (win.ImageDialog.getImageData) {
-                            win.ImageDialog.getImageData();
-                        }
-                        // update preview if necessary
-                        if (win.ImageDialog.showPreviewImage) {
-                            win.ImageDialog.showPreviewImage(URL);
-                        }
-                    }
-
-                    // close popup window
-                    tinyMCEPopup.close();
-                }
-            }
-
-            tinyMCEPopup.onInit.add(FileBrowserDialogue.init, FileBrowserDialogue);
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url : '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce4.blade.php b/resources/views/tinymce4.blade.php
deleted file mode 100644
index 107a59b..0000000
--- a/resources/views/tinymce4.blade.php
+++ /dev/null
@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        
-        @include('vendor.elfinder.common_scripts')
-        @include('vendor.elfinder.common_styles')
-        
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    // pass selected file path to TinyMCE
-                    parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
-
-                    // close popup window
-                    parent.tinymce.activeEditor.windowManager.close();
-                }
-            }
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    @if($locale)
-                        lang: '{{ $locale }}', // locale
-                    @endif
-                    customData: { 
-                        _token: '{{ csrf_token() }}'
-                    },
-                    url: '{{ route("elfinder.connector") }}',  // connector URL
-                    soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce4.php b/resources/views/tinymce4.php
deleted file mode 100644
index 5083463..0000000
--- a/resources/views/tinymce4.php
+++ /dev/null
@@ -1,86 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-    <head>
-        <meta charset="utf-8">
-        <title>elFinder 2.0</title>
-
-        <!-- jQuery and jQuery UI (REQUIRED) -->
-        <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-        <!-- elFinder CSS (REQUIRED) -->
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-        <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-        <!-- elFinder JS (REQUIRED) -->
-        <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-        <?php if ($locale) { ?>
-            <!-- elFinder translation (OPTIONAL) -->
-            <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-        <?php } ?>
-        
-        <!-- elFinder initialization (REQUIRED) -->
-        <script type="text/javascript">
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (URL) {
-                    // pass selected file path to TinyMCE
-                    parent.tinymce.activeEditor.windowManager.getParams().setUrl(URL);
-
-                    // close popup window
-                    parent.tinymce.activeEditor.windowManager.close();
-                }
-            }
-
-            $().ready(function() {
-                var theme = 'default';
-
-                var elf = $('#elfinder').elfinder({
-                    // set your elFinder options here
-                    <?php if ($locale) { ?>
-                        lang: '<?= $locale ?>', // locale
-                    <?php } ?>
-                    customData: { 
-                        _token: '<?= csrf_token() ?>'
-                    },
-                    url: '<?= route('elfinder.connector') ?>',  // connector URL
-                    soundPath: '<?= asset($dir.'/sounds') ?>',
-                    getFileCallback: function(file) { // editor callback
-                        FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE
-                    },
-                    themes: {
-                        default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                        dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                    },
-                    theme: theme
-                },
-                function(fm, extraObj) {
-                    fm.bind('open', function() {
-                        setElFinderColorMode();
-                    });
-                }).elfinder('instance');
-
-                function isElfinderInDarkMode() {
-                    return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-                }
-
-                function setElFinderColorMode() {
-                    theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                    let instance = $('#elfinder').elfinder('instance');
-                    instance.changeTheme(theme).storage('theme', theme);
-                }
-            });
-        </script>
-    </head>
-    <body>
-
-        <!-- Element where elFinder will be created (REQUIRED) -->
-        <div id="elfinder"></div>
-
-    </body>
-</html>
diff --git a/resources/views/tinymce5.blade.php b/resources/views/tinymce5.blade.php
deleted file mode 100644
index 5a7cd30..0000000
--- a/resources/views/tinymce5.blade.php
+++ /dev/null
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    
-    @include('vendor.elfinder.common_scripts')
-    @include('vendor.elfinder.common_styles', ['styleBodyElement' => true])
-
-    <!-- elFinder initialization (REQUIRED) -->
-    <script type="text/javascript">
-        $(document).ready(function () {
-
-            var FileBrowserDialogue = {
-                init: function() {
-                    // Here goes your code for setting your custom things onLoad.
-                },
-                mySubmit: function (file) {
-                    window.parent.postMessage({
-                        mceAction: 'fileSelected',
-                        data: {
-                            file: file
-                        }
-                    }, '*');
-                }
-            };
-
-            let elfinderConfig = {
-                cssAutoLoad : false,
-                speed: 100,
-                // set your elFinder options here
-                @if($locale)
-                    lang: '{{ $locale }}', // locale
-                @endif
-                customData: {
-                    _token: '{{ csrf_token() }}'
-                },
-                url: '{{ route("elfinder.connector") }}',  // connector URL
-                soundPath: '{{ Basset::getUrl(base_path("vendor/studio-42/elfinder/sounds")) }}',
-                getFileCallback: function(file) { // editor callback
-                    FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE
-                },
-                height: $(window).height()
-            };
-
-            var elf = $('#elfinder').elfinder(elfinderConfig);
-            document.getElementById('elfinder').style.opacity = 1;
-        });
-    </script>
-</head>
-<body style="margin:0;top:0;left:0;bottom:0;width:100%;height:100%;">
-
-<!-- Element where elFinder will be created (REQUIRED) -->
-<div id="elfinder"></div>
-
-</body>
-</html>
diff --git a/resources/views/tinymce5.php b/resources/views/tinymce5.php
deleted file mode 100644
index 6404f86..0000000
--- a/resources/views/tinymce5.php
+++ /dev/null
@@ -1,87 +0,0 @@
-<!DOCTYPE html>
-<html lang="<?= app()->getLocale() ?>">
-<head>
-    <meta charset="utf-8">
-    <title>elFinder 2.0</title>
-
-    <!-- jQuery and jQuery UI (REQUIRED) -->
-    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
-
-    <!-- elFinder CSS (REQUIRED) -->
-    <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/elfinder.min.css') ?>">
-    <link rel="stylesheet" type="text/css" href="<?= asset($dir.'/css/theme.css') ?>">
-
-    <!-- elFinder JS (REQUIRED) -->
-    <script src="<?= asset($dir.'/js/elfinder.min.js') ?>"></script>
-
-    <?php if ($locale) { ?>
-        <!-- elFinder translation (OPTIONAL) -->
-        <script src="<?= asset($dir."/js/i18n/elfinder.$locale.js") ?>"></script>
-    <?php } ?>
-
-    <!-- elFinder initialization (REQUIRED) -->
-    <script type="text/javascript">
-        var FileBrowserDialogue = {
-            init: function() {
-                // Here goes your code for setting your custom things onLoad.
-            },
-            mySubmit: function (file) {
-                window.parent.postMessage({
-                    mceAction: 'fileSelected',
-                    data: {
-                        file: file
-                    }
-                }, '*');
-            }
-        };
-
-        $().ready(function() {
-            var theme = 'default';
-            
-            var elf = $('#elfinder').elfinder({
-                // set your elFinder options here
-                <?php if ($locale) { ?>
-                lang: '<?= $locale ?>', // locale
-                <?php } ?>
-                customData: {
-                    _token: '<?= csrf_token() ?>'
-                },
-                url: '<?= route('elfinder.connector') ?>',  // connector URL
-                soundPath: '<?= asset($dir.'/sounds') ?>',
-                getFileCallback: function(file) { // editor callback
-                    FileBrowserDialogue.mySubmit(file); // pass selected file path to TinyMCE
-                },
-                themes: {
-                    default : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-gray.json',
-                    dark : 'https://cdn.jsdelivr.net/gh/RobiNN1/elFinder-Material-Theme/manifests/material-default.json',
-                },
-                theme: theme
-            },
-            function(fm, extraObj) {
-                fm.bind('open', function() {
-                    setElFinderColorMode();
-                });
-            }).elfinder('instance');
-
-            function isElfinderInDarkMode() {
-                return typeof window.parent?.colorMode !== 'undefined' && window.parent.colorMode.result === 'dark';
-            }
-
-            function setElFinderColorMode() {
-                theme = isElfinderInDarkMode() ? 'dark' : 'default';
-
-                let instance = $('#elfinder').elfinder('instance');
-                instance.changeTheme(theme).storage('theme', theme);
-            }
-        });
-    </script>
-</head>
-<body>
-
-<!-- Element where elFinder will be created (REQUIRED) -->
-<div id="elfinder"></div>
-
-</body>
-</html>
diff --git a/src/BackpackElfinderController.php b/src/BackpackElfinderController.php
index 6f6606a..7a49812 100644
--- a/src/BackpackElfinderController.php
+++ b/src/BackpackElfinderController.php
@@ -30,8 +30,15 @@ public function showPopup($input_id)
         }
 
         return $this->app['view']
-            ->make($this->package.'::standalonepopup')
+            ->make('backpack.elfinder::standalonepopup')
             ->with($this->getViewVars())
             ->with(compact('input_id'));
     }
+
+    public function showIndex()
+    {
+        return $this->app['view']
+            ->make('backpack.elfinder::elfinder')
+            ->with($this->getViewVars());
+    }
 }
diff --git a/src/Console/Commands/Install.php b/src/Console/Commands/Install.php
index ff3f046..0021630 100644
--- a/src/Console/Commands/Install.php
+++ b/src/Console/Commands/Install.php
@@ -42,10 +42,11 @@ public function handle()
         File::ensureDirectoryExists('public/uploads');
         $this->closeProgressBlock();
 
-        // Publishing custom elfinder views
-        $this->progressBlock('Publishing custom elfinder views');
+        // Publishing elfinder config file
+        $this->progressBlock('Publishing the config file');
         $this->executeArtisanProcess('vendor:publish', [
             '--provider' => FileManagerServiceProvider::class,
+            '--tag' => 'config',
         ]);
         $this->closeProgressBlock();
 
diff --git a/src/FileManagerServiceProvider.php b/src/FileManagerServiceProvider.php
index 8917c88..908d2a1 100644
--- a/src/FileManagerServiceProvider.php
+++ b/src/FileManagerServiceProvider.php
@@ -27,6 +27,14 @@ public function boot()
         }
 
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'backpack.elfinder');
+        
+        $crudLanguages = array_keys(config('backpack.crud.languages', []));
+        foreach ($crudLanguages as $language) {
+            if ($language === 'en') {
+                continue;
+            }
+            Basset::map('bp-elfinder-i18n-'.$language, 'https://raw.githubusercontent.com/Studio-42/elFinder/refs/tags/2.1.64/js/i18n/elfinder.'.$language.'.js');
+        }
     }
 
     public function register()
@@ -54,7 +62,7 @@ protected function bootForConsole()
     {
         // Publishing the views.
         $this->publishes([
-            __DIR__.'/../resources/views' => resource_path('views/vendor/elfinder'),
+            __DIR__.'/../resources/views' => resource_path('views/vendor/backpack/filemanager'),
         ], 'views');
 
         // Publishing config file.

From 2dacc9e76c2d50815c2e2005d14f872ae6a4bd29 Mon Sep 17 00:00:00 2001
From: StyleCI Bot <bot@styleci.io>
Date: Tue, 8 Jul 2025 13:45:32 +0000
Subject: [PATCH 2/3] Apply fixes from StyleCI

---
 src/FileManagerServiceProvider.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/FileManagerServiceProvider.php b/src/FileManagerServiceProvider.php
index 908d2a1..ee00bb1 100644
--- a/src/FileManagerServiceProvider.php
+++ b/src/FileManagerServiceProvider.php
@@ -27,7 +27,7 @@ public function boot()
         }
 
         $this->loadViewsFrom(__DIR__.'/../resources/views', 'backpack.elfinder');
-        
+
         $crudLanguages = array_keys(config('backpack.crud.languages', []));
         foreach ($crudLanguages as $language) {
             if ($language === 'en') {

From a96be08eda973fd01dd2a6bf9fa9031d47eb1605 Mon Sep 17 00:00:00 2001
From: pxpm <pxpm88@gmail.com>
Date: Tue, 8 Jul 2025 15:33:32 +0100
Subject: [PATCH 3/3] fix assets

---
 resources/views/fields/browse.blade.php       | 20 +++++++++++++++----
 .../views/fields/browse_multiple.blade.php    | 15 +++++++++++---
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/resources/views/fields/browse.blade.php b/resources/views/fields/browse.blade.php
index 67fe22f..2ecfba8 100644
--- a/resources/views/fields/browse.blade.php
+++ b/resources/views/fields/browse.blade.php
@@ -33,9 +33,18 @@
 	{{-- FIELD CSS - will be loaded in the after_styles section --}}
     @push('crud_fields_styles')
 		{{-- include browse server css --}}
-		@basset('https://unpkg.com/jquery-colorbox@1.6.4/example2/colorbox.css')
-		@basset('https://unpkg.com/jquery-colorbox@1.6.4/example2/images/loading.gif', false)
-		@basset('https://unpkg.com/jquery-colorbox@1.6.4/example2/images/controls.png', false)
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/colorbox.css', true, [
+			'integrity' => 'sha384-HmslgkPwGM5TYgFgpe7Hz++h4HkDNZij42ObIXoXK771r/rs+kicv69E2lj0WIRq', 
+			'crossorigin' => 'anonymous'
+		])
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/images/loading.gif', false, [
+			'integrity' => 'sha256-ZG7zstGXrrtjO6k6MkhemyiZVml/jgZY1LZCwarlmX0=', 
+			'crossorigin' => 'anonymous'
+		])
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/images/controls.png', false, [
+			'integrity' => 'sha256-zTLuvjLgmphUaxZ/5gsLHyPz70A2wKH914uvqdG2xl0=', 
+			'crossorigin' => 'anonymous'
+		])
 		@bassetBlock('backpack/pro/fields/browse-field.css')
 		<style>
 			#cboxContent, #cboxLoadedContent, .cboxIframe {
@@ -47,7 +56,10 @@
 
     @push('crud_fields_scripts')
 		{{-- include browse server js --}}
-		@basset('https://unpkg.com/jquery-colorbox@1.6.4/jquery.colorbox-min.js')
+		@basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/jquery.colorbox.min.js', true, [
+			'integrity' => 'sha384-nRGTVvv4Qn110QBA9rXeSIVNgDwYTg+ZqPaUquO44OQaVASFOVFo5beRb62KFOu/', 
+			'crossorigin' => 'anonymous'
+		])
 		@bassetBlock('backpack/pro/fields/browse-field.js')
 		<script type="text/javascript">
 			// this global variable is used to remember what input to update with the file path
diff --git a/resources/views/fields/browse_multiple.blade.php b/resources/views/fields/browse_multiple.blade.php
index b5c9f61..634d7e3 100644
--- a/resources/views/fields/browse_multiple.blade.php
+++ b/resources/views/fields/browse_multiple.blade.php
@@ -80,7 +80,10 @@
 
     {{-- FIELD CSS - will be loaded in the after_styles section --}}
     @push('crud_fields_styles')
-        @basset('https://unpkg.com/jquery-colorbox@1.6.4/example2/colorbox.css')
+        @basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/example2/colorbox.css', true, [
+			'integrity' => 'sha384-HmslgkPwGM5TYgFgpe7Hz++h4HkDNZij42ObIXoXK771r/rs+kicv69E2lj0WIRq', 
+			'crossorigin' => 'anonymous'
+		])
         @bassetBlock('backpack/pro/fields/browse-multiple-field.css')
         <style>
             #cboxContent, #cboxLoadedContent, .cboxIframe {
@@ -92,8 +95,14 @@
 
     @push('crud_fields_scripts')
 
-        @basset('https://unpkg.com/jquery-colorbox@1.6.4/jquery.colorbox-min.js')
-        @basset('https://unpkg.com/jquery-ui@1.13.2/dist/jquery-ui.min.js')
+        @basset('https://cdn.jsdelivr.net/npm/jquery-colorbox@1.6.4/jquery.colorbox.min.js', true, [
+			'integrity' => 'sha384-nRGTVvv4Qn110QBA9rXeSIVNgDwYTg+ZqPaUquO44OQaVASFOVFo5beRb62KFOu/', 
+			'crossorigin' => 'anonymous'
+		])
+        @basset('https://raw.githubusercontent.com/jquery/jquery-ui/refs/tags/1.13.2/dist/jquery-ui.min.js', true, [
+            'integrity' => 'sha384-4D3G3GikQs6hLlLZGdz5wLFzuqE9v4yVGAcOH86y23JqBDPzj9viv0EqyfIa6YUL', 
+            'crossorigin' => 'anonymous'
+        ])
         @bassetBlock('backpack/pro/fields/browse-multiple-field.js')
         <script>
             // this global variable is used to remember what input to update with the file path