No Code Attached Yet
avatar robbiejackson
robbiejackson
12 Nov 2022

Steps to reproduce the issue

I encountered this issue whenever I was looking to update for Joomla 4 the MVC Tutorial step Adding an Image. In this step the user can upload an image file via a front-end form. The file gets stored in the images folder and the filename is stored in the database table associated with the (helloworld) component.

However because I'm on a Windows PC and the code uses Path::clean on the filename it gets stored in the database field with the Windows DIRECTORY_SEPARATOR which is a backslash, eg

images\myphoto.png

Subsequently the admin edit form xml file treats this database field as a "media" type field, but when the record is edited a message is output:

Notice: Undefined offset: 0 in ...\libraries\src\Form\Field\MediaField.php on line 294

This occurs in the getLayoutData function, below the comment:

// Value in new format such as images/headers/blue-flower.jpg#joomlaImage://local-images/headers/blue-flower.jpg?width=700&height=180

There isn't a # in the filename so the code drops to encounter the line

$paths = explode('/', $this->value);

This is supposed to split the pathname into its folders, but doesn't give the desired result in this case because the folder separator is a \ instead of a /, and this causes the warning message above to be subsequently output.

Further problems are experienced down the line.
When the record is edited (without changing the image information) and saved the filename then appears in phpmyadmin as

images\\myphoto.png\/#joomlaImage:\/\/local-images\\myphoto.png\/?width=324&height=324
(where the first \ is the escape character).

and when it the functionality tries to display it inside an html img element it gets
src = 'http://localhost/j4hw/images\myphoto.png/#joomlaImage://local-images\myphoto.png/?width=324&height=324'
which doesn't work.

I know that in Joomla 3 when the filename of a media type field (with the image selected via com_media) was stored in the database it was stored with a /, even on Windows – eg images/myphoto.png.

However in Joomla 3 it still coped ok with the case where the pathname adopted the Windows format with the backslash.
So I guess the question is whether the Joomla 4 media field should cope with the case where the media filename uses the Windows directory separator or not.

I suspect there are extensions out there running on windows servers which have stored a filename in that format and want to use a media type form field to access it in forms. They would then encounter this issue when the website is upgraded to Joomla 4.

avatar robbiejackson robbiejackson - open - 12 Nov 2022
avatar robbiejackson robbiejackson - change - 12 Nov 2022
Labels Removed: ?
avatar joomla-cms-bot joomla-cms-bot - change - 12 Nov 2022
Labels Added: No Code Attached Yet
avatar joomla-cms-bot joomla-cms-bot - labeled - 12 Nov 2022
avatar ReLater
ReLater - comment - 12 Nov 2022

However because I'm on a Windows PC and the code uses Path::clean on the filename it gets stored in the database field with the Windows DIRECTORY_SEPARATOR which is a backslash, eg

As far as I see: You can force the slash by using in the component's save().

$relativePathname = JPath::clean($mediaparams->get($path, 'images') . '/' . $file['name'], '/');

See the additional '/' at the end.

Then it should be saved correctly. See

// Upload succeeded, so update the relative filename for storing in database
$validData['imageinfo']['image'] = $relativePathname;
avatar robbiejackson
robbiejackson - comment - 12 Nov 2022

Yes I understand that I can do that when saving new records.

But my concern more related to existing records in databases, and in particular where you had Joomla 3 component extensions running on Windows servers where they used the media form field type with a Windows-format filename. They would encounter this issue when the installation was upgraded to Joomla 4.

So I was really wanting to raise the question of whether people thought that the media form field type in Joomla 4 should support Windows-format pathnames (with the backslash), as it does for Joomla 3.


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39203.

avatar ReLater
ReLater - comment - 12 Nov 2022

I missed that one:

However in Joomla 3 it still coped ok with the case where the pathname adopted the Windows format with the backslash.

So I guess the question is whether the Joomla 4 media field should cope with the case where the media filename uses the Windows directory separator or not.

avatar alikon
alikon - comment - 12 Nov 2022

cc: @laoneo , @dgrammatiko
your opinion ?

avatar joomdonation
joomdonation - comment - 13 Nov 2022

@robbiejackson Do you have a copy of installable helloworld component which you are working on so that we can install, use it to understand the issue better and find a solution to address it?

avatar robbiejackson
robbiejackson - comment - 13 Nov 2022

Here's a link to the install zip file on my google drive:

https://drive.google.com/file/d/1PCrlucdD4HCJ4k8gTGcnDoQ-SpcAQG0X/view?usp=share_link

I'm going through the MVC tutorial trying to get it to work on Joomla 4. This is with the intention of adding another tutorial step which would give developers guidance on how to upgrade their components to Joomla 4, taking the helloworld tutorial as an example.

To reproduce the issue you'd need to be running on a Windows machine, as it uses

$relativePathname = Path::clean($mediaparams->get('image_path', 'images') . '/' . $file['name']);

in site\src\Controller\HelloworldController.php line 175, or you could change the code to pass "\" as the second parameter to the Path::clean call.

Then you would have to do the following:

  1. In the backend, set up a menuitem to point to Hello World / Hello World (view which displays a selected message)
  2. Set up a menuitem to point to Hello World / Hello World Form
  3. In the front end click on the helloworld form menuitem to create a new message.
  4. In the front end form create a new message and upload an image file, setting the caption field
  5. In the backend go to Components / Hello World / Hello World (which displays the list of greetings). It should show the caption text for the record uploaded, plus the image as a tooltip on the caption text.
  6. Click on the record to edit it and then click on the image tab - you should see the Notice message above.
  7. Click on Save (without having made any changes).
  8. On the list of helloworld records which appears the tooltip should no longer display the image
  9. On the frontend click on the menuitem to display the helloworld message, then change the url to set the id to be the id of the uploaded record - it probably won't display the image.
  10. In the backend click on the record to edit it again, then click on the image tab. It should now say "Select image This value is not valid"

Things may vary a little from the above. I believe there's a plugin which affects the filename of the media file, and the filename may differ depending upon how many times the plugin has been run on it.

avatar joomdonation
joomdonation - comment - 14 Nov 2022

Thanks @robbiejackson for details information. I will try to find time to look at this issue and find a solution in coming days.

avatar joomdonation joomdonation - change - 19 Nov 2022
Status New Closed
Closed_Date 0000-00-00 00:00:00 2022-11-19 10:07:45
Closed_By joomdonation
avatar joomdonation joomdonation - close - 19 Nov 2022
avatar joomdonation
joomdonation - comment - 19 Nov 2022

@robbiejackson Finally, I have time to check this . Please test PR #39248. Thanks !

avatar robbiejackson
robbiejackson - comment - 21 Nov 2022

@joomdonation I've been looking at this today. Mostly it works well, but I still get an issue if I do the following:

  1. Set the global config Media / "Path to Images Folder" to a Windows-format path, eg images\photos
  2. Upload a new helloworld record plus image via the front end form.
  3. In the Admin back-end display the helloworld records and then click on the new one to edit it
  4. In the helloworld edit form press Save
  5. In the helloworld edit form / images tab click on the green Select button which is bottom right of the image.

On my pc this then displays an error at the top of the modal window which appears:

The account was not found

avatar dgrammatiko
dgrammatiko - comment - 21 Nov 2022

The account was not found

There’s a pr for that: #38934

avatar joomdonation
joomdonation - comment - 22 Nov 2022

@robbiejackson The account was not found issue should also be fixed with my last commit. Please check it again

avatar robbiejackson
robbiejackson - comment - 22 Nov 2022

@joomdonation I'm still getting an error after

  • uploading a new record + image via the front-end form,
  • editing the record on the back-end and pressing Save

When I click on the Image tab on the helloworld edit form it shows in the image field:

Select image
This value is not valid

(and in red) images\p2.jpg/#joomlaImage://local-images\p2.jpg/?width=400&height=267

Then when I press Select (to select an image) the error message The account was not found appears.

This occurs for both the Global Config Media / Path to Images Folder set to images and images\photos.

avatar dgrammatiko
dgrammatiko - comment - 22 Nov 2022

@robbiejackson you have to either use the PR #38934 or go to your browser's dev tools and CLEAR the session storage/localstorage.

This occurs for both the Global Config Media / Path to Images Folder set to images and images\photos.

These settings are not used anymore

avatar robbiejackson
robbiejackson - comment - 22 Nov 2022

ok, I cleared the storage using the devtools and started testing again from scratch.

All looks good, I couldn't generate anything unexpected.

Thanks guys!

avatar joomdonation
joomdonation - comment - 23 Nov 2022

@robbiejackson Could you please go to https://issues.joomla.org/tracker/joomla-cms/39248 , report your test result so that the PR could be merged ?

Add a Comment

Login with GitHub to post a comment