Some progress but still not working.
Here is my elFinder call now:
[[!npElFinderConnector? &browserBasePath=`/paas/somenumbers/www/images/` &browserBaseURL=`/images/`]]
If I view the elFinderConnector page in front end I see this error:
{"error":["errUnknownCmd"]}
If I choose the insert image button in the content rte, I am taken to the correct directory (Yay!) And I can insert the image if it is already in the directory. But I don't see an upload new image option...
Also, more importantly for my use case, I have 5 image TVs in the form. They display as fields with buttons, but their buttons do nothing. Here is the source code in inspector for the first one:
<div id="np-image-1-container" class="np-image">
<label class="fieldlabel" for="np-image-1" title="">Cover Image 1: </label>
<input name="image-1" class="image" id="np-image-1" type="textarea" rows="1" value="" height="30px">
<button id="np-image-1_button" type="button">Select an image</button>
<div id="np-image-1_preview" style="margin-top:10px;"></div>
<script>
$('#np-image-1_button').on('click', function() {
var ef_width = (("80" * 1) || 80) / 100;
var ef_height = (("80" * 1) || 80) / 100;
$('<div id="editor" />').dialogelfinder({
modal: true,
width: window.innerWidth * ef_width,
height: window.innerHeight * ef_height,
title: '<b>elFinder 2.0 (double-click to select your file)</b>',
zIndex: 99999,
/* Disable command Keyboard shortcuts, otherwise they still work
even if the commands are listed as disabled */
/* Disable all command shortcuts */
allowShortcuts: false,
/* Disable specific command shortcuts */
// commandsOptions: {
// upload : {shortcuts : []},
// rm : {shortcuts : []},
// download : {shortcuts : []}
// },
url: 'http://dev.mysite.modxcloud.com/npelfinderconnector.html?media_source=2',
cssAutoLoad: [
'/assets/components/newspublisher/elfinder/elfinderthemes/osx/css/theme.css'
],
getFileCallback: function(file) {
var fileUrl = file.url.replace('\\','/'); // (file is an object)
var mybase = file.baseUrl.replace('\\','/');
var finalUrl = fileUrl.replace(mybase, '');
// This is for the preview window
var imgTag = '<img src="'+ file.tmb + '">';
$('#np-image-1').val(finalUrl); // put the file path in the input field
$('#editor').remove(); //close the window after image is selected
$('#np-image-1_preview').html(imgTag);
// console.log("Path: " + file.path);
// console.log("URL: " +file.url);
// console.log('FINAL: '+finalUrl);
// console.log(file);
}
});
});
/* Show image preview on page load (if TV value isn't blank) */
$(document).ready(function () {
/* ToDo: Trim this */
var val = $('#np-image-1').val();
// console.log("Value: " + val);
if (val.length > 0) {
var phpThumbUrl = '/connectors/system/phpthumb.php?';
var baseUrl = 'images/';
var imgTag = '<img src="' + phpThumbUrl + '&src=' + baseUrl + val + '&h=100&w=100">';
// console.log("Base URL: " + baseUrl);
// console.log("phpThumbUrl: " + phpThumbUrl);
// console.log("Image Tag: " + imgTag);
// console.log('Has Length');
$('#np-image-1_preview').html(imgTag);
}
});
☆ A M B ☆
