Skip to content

Instantly share code, notes, and snippets.

@arturmamedov

arturmamedov/standalonepopup.html

Last active May 10, 2023 08:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save arturmamedov/b448cdb01e5c6aec2aec1fea33bf953b to your computer and use it in GitHub Desktop.
Save arturmamedov/b448cdb01e5c6aec2aec1fea33bf953b to your computer and use it in GitHub Desktop.
Download ZIP
elFinder standalonepopup in a new browser window (not modal, colorbox etc.)
Raw
standalonepopup.html
<!-- main.html (html input and js for open new window with elFinder for select file) -->
<input type="text" class="form-control" value="" id="idOfInput" onfocus="return openElFinder(event, 'idOfInput');"/>
<script>
$( document ).ready(function() {
window.input_id = '';
window.openElFinder = function (event, input_id) {
event.preventDefault();
window.single = true;
window.old = false;
window.input_id = input_id;
window.open('/elfinder/popup?input_id='+input_id, '_blank', 'menubar=no,status=no,toolbar=no,scrollbars=yes,height=500,width=1000');
return false;
};
// function to update the file selected by elfinder
window.processSelectedFile = function (filePath, requestingField) {
$('#' + requestingField).val(filePath).trigger('change');
}
});
</script>
<!-- standalonepopup.html (on url /elfinder/popup?input_id=...) -->
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>elFinder</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="/elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" href="/elfinder/css/theme.css">
<!-- elFinder JS (REQUIRED) -->
<script src="/elfinder/js/elfinder.min.js"></script>
<!-- elFinder translation (OPTIONAL) -->
<script src="/elfinder/js/i18n/elfinder.it.js"></script>
<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) -->
<script type="text/javascript">
$().ready(function () {
var elf = $('#elfinder').elfinder({
// set your elFinder options here
lang: 'it', // locale
url: '/elfinder....connector.php', // connector URL
soundPath: '/elfinder/sounds',
dialog: {width: 900, modal: true, title: 'Select a file'},
resizable: false,
commandsOptions: {
getfile: {
oncomplete: 'destroy'
}
},
getFileCallback: function (file, elf) {
// the magic is here, use function from "main.html" for update input value
window.parent.opener.processSelectedFile(file.path, '{{ $input_id }}');
window.close();
},
// toolbar configuration
uiOptions : {
// toolbar configuration
toolbar : [
['home', 'back', 'forward', 'up', 'reload'],
['mkdir', 'mkfile', 'upload'],
['open', 'download', 'getfile'],
['undo', 'redo'],
['copy', 'cut', 'paste', 'rm', 'empty'],
['duplicate', 'rename', 'edit', 'resize', 'chmod'],
['selectall', 'selectnone', 'selectinvert'],
['quicklook', 'info'],
['extract', 'archive'],
// ['search'],
['view', 'sort'],
['help'], //'preference',
['fullscreen']
],
// toolbar extra options
toolbarExtra : {
// also displays the text label on the button (true / false)
displayTextLabel: false,
// Exclude `displayTextLabel` setting UA type
labelExcludeUA: ['Mobile'],
// auto hide on initial open
autoHideUA: ['Mobile'],
// Initial setting value of hide button in toolbar setting
defaultHides: [],
// show Preference button ('none', 'auto', 'always')
// If you do not include 'preference' in the context menu you should specify 'auto' or 'always'
showPreferenceButton: 'none'
},
},
height : '100%',
}).elfinder('instance');
});
</script>
</head>
<body>
<!-- Element where elFinder will be created (REQUIRED) -->
<div id="elfinder"></div>
</body>
</html>
@arturmamedov
Copy link
Author

The trick is to prototype/add functions to window object and after use it from the new opened popup window in the elFinder fallback after selection getFileCallback

screenshot 2018-07-24 12 28 25

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