NewsPublisher Can't Open File Browser for Image Fields

pixelstuff · March 14, 2025, 7:57pm

In MODx 3.1 I’m trying to use NewsPublisher and can’t get the image file picker to work or show the preview image. The form seems to be loading the default npImageTpl, but the button doesn’t open anything. The thumbnail preview also doesn’t render the image either.

For the file picker button, I ran across the following elsewhere in the forums, but not sure where to verify or make the changes.

Is that resource group connected to the user group with a Resource Group Access ACL entry with a Policy of NewsPublisherEditor and a minimum role that allows the rule to apply to them (e.g., not “member”)?

So I’m guessing that policy or role probably isn’t assigned properly. Where do I look to verify this? Publishing and editing does already work for normal text fields.

For the image preview box, it has a URL something like this:
https://domain.com/connectors/system/phpthumb.php?&src=assets/usercontent/photo.jpg&h=48&w=48

Opening that URL on it’s own shows {"success":false,"code":401} but image itself will display fine on it’s own if the phpthumb connector is removed like this: https://domain.com/assets/usercontent/photo.jpg

bobray · March 15, 2025, 8:30pm

Go to System → Access Control Lists → Policy Tab and update the NewsPublisherEditor policy. It could be an issue with a missing Media Source permission.

I could also be an issue with the Media Source itself if you’ve limited access to it.

pixelstuff · March 16, 2025, 9:34pm

I didn’t see anything unusual inside the NewsPublisherEditor policy. Media sources can be viewed and listed.

If I go to the user group access permissions itself, I have things like this:

It won’t let me add the NewsPublisherEditor permission to the Resource Groups or Media Sources, only the Contexts. Is that normal?

bobray · March 17, 2025, 10:33pm

Yes, that’s normal. It’s not an object policy.

What does your full NewsPublisher tag look like?

Does your np_media_source_var System Setting point to the correct media source?

Also, check the values of the elFinder snippet connector properties listed [here].(Bob's Guides | NewsPublisher Snippet).

pixelstuff · March 18, 2025, 2:37am

The NewsPublisher tag looks like this:

[[!NewsPublisher?
    &show=`pagetitle, Custom1, Custom2, Photo, content`
    &required=`pagetitle`
    &templateid=`5`
    &groups=`User`
    &published=`1`
    &richtext_default=`0`
    &initfilebrowser=`1`
    &cssfile=`0`
    &contentrows=`4`
]]

The np_media_source_var is set to the default media_source.

Where do the elFinder properties go? Tacked on to the NewsPublisher tag? I would have assumed the defaults would at least allow the dialog to open.

Actually what I would prefer instead of a file browser is something like the Login packages hookUpdateProfile snippet that lets them upload a file, renames it to a random looking string or a hash, and doesn’t let them browse for other files.

Why would image preview thumbnail not show anything. Would that be a permission issue somewhere? <img src="/connectors/system/phpthumb.php?&src=assets/usercontent/default.jpg&h=48&w=48"> It is kind of like phpthumb isn’t working.

bobray · March 18, 2025, 6:35pm

Try adding

&initrte=`1

to the NP properties.

Make sure the users have the file_manager permission.

The elFinder properties are on the properties tab of the npElFinderConnector snippet. If you change any of them, you’ll eventually want to create a property set so your changes won’t be overwritten by updated to NP.

Be sure to check the &disableCommand property.

If none of that helps, it may be a conflict between NP, elFinder, and PhpThumb. I don’t user PhpThumb, so I won’t be able to help if that’s the issue.

pixelstuff · March 18, 2025, 8:34pm

Well, &initrte=`1 seems to cause the page to fail to load (500 error).

The NewsPublisherEditor policy does have file_manager permission enabled which is assigned to the web context section for the users.

The elFinder defaults look like they should work to me. They point to the standard assets folder which does exist. I’m not sure though what the disable commands are referencing. Those are defaults: archive, download, cut, copy, paste, duplicate, edit, open, mkdir, mkfile, netmount, netunmount, rm, rename, quicklook, upload, view

Surely the defaults wouldn’t prevent the file browser from even opening.

As far as phpThumb, that is in the default npImageTpl near the bottom in some javascript stuff. I didn’t add that in myself.

/* Show image preview on page load (if TV value isn't blank) */
    $(document).ready(function () {
        /* ToDo: Trim this */
        var val = $('#np-[[+npx.fieldName]]').val();
        // console.log("Value: " + val);
        if (val.length > 0) {
            var phpThumbUrl = '[[+phpThumbUrl]]';
            var baseUrl = '[[+baseUrl]]';
            var imgTag = '<img src="' + phpThumbUrl + '&src=' + baseUrl + val + '&h=[[++np_elfinder_tmb_size]]&w=[[++np_elfinder_tmb_size]]">';
            // console.log("Base URL: " + baseUrl);
            // console.log("phpThumbUrl: " + phpThumbUrl);
            // console.log("Image Tag: " + imgTag);
            // console.log('Has Length');
            $('#np-[[+npx.fieldName]]_preview').html(imgTag);
        }

    });

If I insert the url it creates:
https://domain.com/connectors/system/phpthumb.php?&src=assets/usercontent/photo.jpg&h=48&w=48
… on a dedicated browser window using another MODx site running v2.8.8 (using an image that exists) then the image is rendered.

If I do the same on another site running MODx 3.0.4, then I get the same error message and no image. It seems like MODx 3 must be doing something to block access to that included phpthumb connector.

bobray · March 18, 2025, 8:45pm

That property needs a closing backtick. The forum software doesn’t show it.

If I do the same on another site running MODx 3.0.4, then I get the same error message and no image. It seems like MODx 3 must be doing something to block access to that included phpthumb connector.

That suggests that the problem doesn’t have anything to do with NewsPublisher. The only thing I can suggest is trying the experiment you described above with Dev. Tools turned on (Ctrl-shift-i) and watching the network tab as you load the page. Click on the any URL related to the connector URL (it could be to index.php) and look at the request and response tabs to see if there are any clues to what’s happening.

pixelstuff · March 18, 2025, 8:53pm

&initrte=`1`
Yep. I hand typed it into the snippet call, so both tics were in there first time around.

Edit: Browser dev tools are showing a 401 unauthorized error for the phpthumb request, but not sure why.

It also looks like the admin account, if logged in, will run the phpthumb connector and display the image. If logged out the 401 is returned. This has no effect on the file browser though. That doesn’t come up for the admin either.

pixelstuff · March 18, 2025, 10:40pm

The MODx 2.8.8 test with phpthumb working was a false result. Apparently I was logged into the manager for that site.

So it seems like the phpthumb connector isn’t normally viewable from the frontend, but since NewsPublisher is a front end utility, apparently whoever developed that npImageTpl chunk had the proper permissions.

Regarding the button not opening anything, the same npImageTpl photo chunk is using a button element to trigger some javascript.

    <div id="np-[[+npx.fieldName]]-container" class="np-image">
        [[+np.error_[[+npx.fieldName]]]]
        <label class="fieldlabel" for="np-[[+npx.fieldName]]" title="[[+npx.help]]">[[+npx.caption]]: </label>
        <input name="[[+npx.fieldName]]" class="image" id="np-[[+npx.fieldName]]"  type="textarea" rows="1"  value="[[+np.[[+npx.fieldName]]]]" height="30px"    />
        <button id="np-[[+npx.fieldName]]_button" type="button">[[%np_launch_image_browser? &namespace=`newspublisher` &topic=`default`]]</button>
        <div id="np-[[+npx.fieldName]]_preview" style="margin-top:10px;"></div>
        <script>
        $('#np-[[+npx.fieldName]]_button').on('click', function() {
            var ef_width = (("[[++np_elfinder_width]]" * 1) || 80) / 100;
            var ef_height = (("[[++np_elfinder_height]]" * 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: '[[++site_url]]npelfinderconnector[[+np_html_extension]][[+media_source]]',
             cssAutoLoad: [
                 '[[+np_assets_url]]elfinder/elfinderthemes/[[++np_elfinder_theme]]/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-[[+npx.fieldName]]').val(finalUrl); // put the file path in the input field
               $('#editor').remove(); //close the window after image is selected
               $('#np-[[+npx.fieldName]]_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-[[+npx.fieldName]]').val();
        // console.log("Value: " + val);
        if (val.length > 0) {
            var phpThumbUrl = '[[+phpThumbUrl]]';
            var baseUrl = '[[+baseUrl]]';
            var imgTag = '<img src="' + phpThumbUrl + '&src=' + baseUrl + val + '&h=[[++np_elfinder_tmb_size]]&w=[[++np_elfinder_tmb_size]]">';
            // console.log("Base URL: " + baseUrl);
            // console.log("phpThumbUrl: " + phpThumbUrl);
            // console.log("Image Tag: " + imgTag);
            // console.log('Has Length');
            $('#np-[[+npx.fieldName]]_preview').html(imgTag);
        }
    });
</script>
</div>

The browser is showing this error whenever I click the button.

name/:142 Uncaught TypeError: $(...).dialogelfinder is not a function
    at HTMLButtonElement.<anonymous> (name/:142:38)
    at HTMLButtonElement.dispatch (jquery.min.js:3:12344)
    at r.handle (jquery.min.js:3:9071)
(anonymous) @ name/:142
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

The reference to 142:38 links to this line:
$('<div id="editor" />').dialogelfinder({

bobray · March 19, 2025, 6:01pm

The reference to 142:38 links to this line:
$('<div id="editor" />').dialogelfinder({

That looks like it could be a JQuery version issue, or a conflict between two JQuery versions.

You could also try this, in case the browser is putting a space in before the <, which Chrome sometimes does:

$('$.trim(<div id="editor" />'))

I’m not sure I have that right.