Skip to content

Instantly share code, notes, and snippets.

@nfaiz

nfaiz/Filemanager.php Secret

Last active October 29, 2021 14:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nfaiz/ebcfb09b6426fe83b313c82687da5dfe to your computer and use it in GitHub Desktop.
Save nfaiz/ebcfb09b6426fe83b313c82687da5dfe to your computer and use it in GitHub Desktop.
Download ZIP
CodeIgniter 4 with elFinder setup
Raw
README.md

CodeIgniter 4 with elFinder using minimal connector.

  1. Install elFinder using Composer

    composer require Studio-42/elFinder

  2. Setup elfinder folder. E.g using assets as working folder

    • Create working folder assets in CodeIgniter 4 public project. E.g ROOTPATH/public/assets
    • Create trash folder in working folder using dot (.) prefix. E.g ROOTPATH/public/assets/.trash

  3. Create

  4. Open elFinder UI using web browser. <site_url>/filemanager

Raw
elfinder.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>elFinder <?= elFinder::getApiFullVersion() ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
</head>
<body>
<div id="elfinder"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
define('elFinderConfig', {
// Documentation for options: https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
defaultOpts : {
url : '<?= $connector ?>'
,commandsOptions : {
edit : {
extraOptions : {
// set API key to enable Creative Cloud image editor
// see https://console.adobe.io/
creativeCloudApiKey : '',
// browsing manager URL for CKEditor, TinyMCE
// uses self location with the empty value
managerUrl : ''
}
}
,quicklook : {
// to enable CAD-Files and 3D-Models preview with sharecad.org
sharecadMimes : [
'image/vnd.dwg'
,'image/vnd.dxf'
,'model/vnd.dwf'
,'application/vnd.hp-hpgl'
,'application/plt'
,'application/step'
,'model/iges'
,'application/vnd.ms-pki.stl'
,'application/sat'
,'image/cgm'
,'application/x-msmetafile'
],
// to enable preview with Google Docs Viewer
googleDocsMimes : [
'application/pdf'
,'image/tiff'
,'application/vnd.ms-office'
,'application/msword'
,'application/vnd.ms-word'
,'application/vnd.ms-excel'
,'application/vnd.ms-powerpoint'
,'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
,'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
,'application/vnd.openxmlformats-officedocument.presentationml.presentation'
,'application/postscript'
,'application/rtf'
],
// to enable preview with Microsoft Office Online Viewer
// these MIME types override "googleDocsMimes"
officeOnlineMimes : [
'application/vnd.ms-office'
,'application/msword'
,'application/vnd.ms-word'
,'application/vnd.ms-excel'
,'application/vnd.ms-powerpoint'
,'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
,'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
,'application/vnd.openxmlformats-officedocument.presentationml.presentation'
,'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet'
,'application/vnd.oasis.opendocument.presentation'
]
}
}
// bootCalback calls at before elFinder boot up
,bootCallback : function(fm, extraObj) {
/* any bind functions etc. */
fm.bind('init', function() {
// any your code
});
// for example set document.title dynamically.
var title = document.title;
fm.bind('open', function() {
var path = '',
cwd = fm.cwd();
if (cwd) {
path = fm.path(cwd.hash) || null;
}
document.title = path? path + ':' + title : title;
}).bind('destroy', function() {
document.title = title;
});
}
},
managers : {
// 'DOM Element ID': { /* elFinder options of this DOM Element */ }
'elfinder': {}
}
});
define('returnVoid', void 0);
(function(){
var // elFinder version
elver = '<?= elFinder::getApiFullVersion() ?>',
// jQuery and jQueryUI version
jqver = '3.6.0',
uiver = '1.12.1',
// Detect language (optional)
lang = (function() {
var locq = window.location.search,
map = {
'pt' : 'pt_BR',
'ug' : 'ug_CN',
'zh' : 'zh_CN'
},
full = {
'zh_tw' : 'zh_TW',
'zh_cn' : 'zh_CN',
'fr_ca' : 'fr_CA'
},
fullLang, locm, lang;
if (locq && (locm = locq.match(/lang=([a-zA-Z_-]+)/))) {
// detection by url query (?lang=xx)
fullLang = locm[1];
} else {
// detection by browser language
fullLang = (navigator.browserLanguage || navigator.language || navigator.userLanguage || '');
}
fullLang = fullLang.replace('-', '_').substr(0,5).toLowerCase();
if (full[fullLang]) {
lang = full[fullLang];
} else {
lang = (fullLang || 'en').substr(0,2);
if (map[lang]) {
lang = map[lang];
}
}
return lang;
})(),
start = function(elFinder, editors, config) {
// load jQueryUI CSS
elFinder.prototype.loadCss('//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/themes/smoothness/jquery-ui.css');
$(function() {
var optEditors = {
commandsOptions: {
edit: {
editors: Array.isArray(editors)? editors : []
}
}
},
opts = {};
// Interpretation of "elFinderConfig"
if (config && config.managers) {
$.each(config.managers, function(id, mOpts) {
opts = Object.assign(opts, config.defaultOpts || {});
// editors marges to opts.commandOptions.edit
try {
mOpts.commandsOptions.edit.editors = mOpts.commandsOptions.edit.editors.concat(editors || []);
} catch(e) {
Object.assign(mOpts, optEditors);
}
// Make elFinder
$('#' + id).elfinder(
// 1st Arg - options
$.extend(true, { lang: lang }, opts, mOpts || {}),
// 2nd Arg - before boot up function
function(fm, extraObj) {
// `init` event callback function
fm.bind('init', function() {
// Optional for Japanese decoder "extras/encoding-japanese.min"
delete fm.options.rawStringDecoder;
if (fm.lang === 'jp') {
require(
[ 'encoding-japanese' ],
function(Encoding) {
if (Encoding.convert) {
fm.options.rawStringDecoder = function(s) {
return Encoding.convert(s,{to:'UNICODE',type:'string'});
};
}
}
);
}
});
}
);
});
} else {
alert('"elFinderConfig" object is wrong.');
}
});
},
load = function() {
require(
[
'elfinder'
, 'extras/editors.default.min' // load text, image editors
, 'elFinderConfig'
// , 'extras/quicklook.googledocs.min' // optional preview for GoogleApps contents on the GoogleDrive volume
],
start,
function(error) {
alert(error.message);
}
);
}
require.config({
baseUrl : '//cdnjs.cloudflare.com/ajax/libs/elfinder/'+elver+'/js',
paths : {
'jquery' : '//cdnjs.cloudflare.com/ajax/libs/jquery/'+jqver+'/jquery.min',
'jquery-ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/'+uiver+'/jquery-ui.min',
'elfinder' : 'elfinder.min',
'encoding-japanese': '//cdn.rawgit.com/polygonplanet/encoding.js/1.0.26/encoding.min'
},
waitSeconds : 10 // optional
});
load();
})();
</script>
</body>
</html>
Raw
Filemanager.php
<?php
namespace App\Controllers;
use CodeIgniter\Controller;
class Filemanager extends Controller
{
public function index()
{
$data['connector'] = site_url('filemanager/connector');
return view('elfinder', $data);
}
// Using php/connector.minimal.php
public function connector()
{
$publicPath = ROOTPATH . 'public/';
$elfinderTrashPath = '/.trash/';
$tmbPath = '/.tmb/';
$elFinderPath = 'assets';
$opts = [
'debug' => true,
'roots' => [
// Items volume
[
'driver' => 'LocalFileSystem', // driver for accessing file system (REQUIRED)
'path' => $publicPath . $elFinderPath, // path to files (REQUIRED)
'URL' => base_url($elFinderPath), // URL to files (REQUIRED)
'trashHash' => 't1_Lw', // elFinder's hash of trash folder
'winHashFix' => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
'uploadDeny' => ['all'], // All Mimetypes not allowed to upload
'uploadAllow' => [
'image/x-ms-bmp',
'image/gif',
'image/jpeg',
'image/png',
'image/x-icon',
'text/plain',
], // Mimetype `image` and `text/plain` allowed to upload
'uploadOrder' => ['deny', 'allow'], // allowed Mimetype `image` and `text/plain` only
'accessControl' => [$this, 'access'] // disable and hide dot starting files (OPTIONAL)
],
// Trash volume
[
'id' => '1',
'driver' => 'Trash',
'path' => $publicPath . $elFinderPath . $elfinderTrashPath,
'tmbURL' => base_url($elFinderPath . $elfinderTrashPath . $tmbPath),
'winHashFix' => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
'uploadDeny' => ['all'], // Recomend the same settings as the volume that uses the trash
'uploadAllow' => [
'image/x-ms-bmp',
'image/gif',
'image/jpeg',
'image/png',
'image/x-icon',
'text/plain',
], // Same as above
'uploadOrder' => ['deny', 'allow'], // Same as above
'accessControl' => [$this, 'access'], // Same as above
],
]
];
$connector = new \elFinderConnector(new \elFinder($opts));
$connector->run();
}
public function access($attr, $path, $data, $volume, $isDir, $relpath)
{
$basename = basename($path);
return $basename[0] === '.' // if file/folder begins with '.' (dot)
&& strlen($relpath) !== 1 // but with out volume root
? !($attr == 'read' || $attr == 'write') // set read+write to false, other (locked+hidden) set to true
: null; // else elFinder decide it itself
}
}
@indrafani03
Copy link

how to make a popup in ckeditor, bro?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment