[4.3] Media Manager support for svg images + set natural{width/height} by dgrammatiko · Pull Request #39586 · joomla/joomla-cms

dgrammatiko · 2023-01-10T08:15:46Z

Pull Request for Issue #39571, #39538, #39543 . Complimentary to #39574 Previous attempt: #38722

Summary of Changes

Fixes the wrong mime type for svg
adds a load event to grab the naturalWidth/naturalHeight

In pictures

Testing Instructions

First add svg to the image extensions, allowed extensions and image/svg+xml to the allowed mime types
Goto Caasiopeia styles and select a new logo
Upload an svg
Select the svg and check that the url has width/height at the end

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Link to documentations

Please select:

Documentation link for docs.joomla.org:
No documentation changes for docs.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed

libraries/src/Helper/MediaHelper.php

viocassel · 2023-01-10T10:23:12Z

I have tested this item ✅ successfully on ed67f35

👌

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39586.}

administrator/components/com_media/resources/scripts/store/mutation-types.es6.js

…ation-types.es6.js Co-authored-by: Quy <quy@nomonkeybiz.com>

Quy · 2023-01-10T17:40:27Z

Added settings, but getting "Unable to upload file." error in Media Manager. I have to investigate why. Added manually for now.

Following are issues:

No image on the frontend.

No preview.

Width/Height = 0

No dimensions.

dgrammatiko · 2023-01-10T17:42:40Z

Added to the settings, but I am getting "Unable to upload file." error. I have to investigate why. Added manually for now.

Is it a valid svg file?
Can you share it? (eg zip it and uploaded here)
Can you clean the svg using: https://jakearchibald.github.io/svgomg/ and try again?

these are the options on my test site:

{
"Allowed Extensions" : "svg,bmp,gif,jpg,jpeg,png,webp,ico,mp3,m4a,mp4a,ogg,mp4,mp4v,mpeg,mov,odg,odp,ods,odt,pdf,png,ppt,txt,xcf,xls,csv",
"Legal Image Extensions (File Types)": "svg,bmp,gif,jpg,png,jpeg,webp",
"Legal MIME Types": "image/svg+xml,image/jpeg,image/gif,image/png,image/bmp,image/webp,audio/ogg,audio/mpeg,audio/mp4,video/mp4,video/webm,video/mpeg,video/quicktime,application/msword,application/excel,application/pdf,application/powerpoint,text/plain,application/x-zip"
}

Quy · 2023-01-10T17:53:16Z

My settings are the same. Here is the cleaned logo using the service which I can now upload but the other issues remain.

clean_logo.zip

Quy · 2023-01-10T18:01:41Z

In the browser console, after selecting a SVG file for the logo.

dgrammatiko · 2023-01-10T18:02:49Z

Oh, I think it's the + on your folder that messes up the apache, do you remember that issue?

Quy · 2023-01-10T18:10:48Z

I do remember now, but I have the same issues under joomla-cms-4.3-dev without +.

dgrammatiko · 2023-01-10T18:14:26Z

In the browser console, after selecting a SVG file for the logo.

Inspecting more carefully the reported URL is wrong, it shouldn't have the /administrator part. This comes from the Form Field Media and now I have to debug this, but to do so I need to reproduce the error...

dgrammatiko · 2023-01-10T18:29:14Z

@Quy can you do something, got to the page where the console error happen, open the browser inspector and paste in the console this Joomla.getOptions('system.paths') and report back what is the value returned. Thanks

Quy · 2023-01-10T18:41:55Z

Object { root: "/joomla-cms-4.3-dev", rootFull: "http://localhost/joomla-cms-4.3-dev/", base: "/joomla-cms-4.3-dev/administrator", baseFull: "http://localhost/joomla-cms-4.3-dev/administrator/" }

dgrammatiko · 2023-01-10T18:43:56Z

Thanks, so the values are correct...

Quy · 2023-01-10T18:52:53Z

This is only happening with SVG files.

Quy · 2023-01-10T19:03:10Z

This could be why width/height=0 due to not finding the image when selecting a SVG file.
images/clean_logo.svg#joomlaImage://local-images/clean_logo.svg?width=0&height=0

dgrammatiko · 2023-01-10T19:19:24Z

This could be why width/height=0 due to not finding the image when selecting a SVG file.

Yes, but the root is not actually in the Form Field Media, but probably in the PHP code of either the filesystem or the MediaHelper, I guess for some reason the followin conditional is wrong on your machine: https://github.com/joomla/joomla-cms/pull/39586/files#diff-b9cf1b73ab2438daa98290f2c650099e320527df061d94e31763982e9743dacdR116

Could you patch that line to:

        if (strtolower(pathinfo($file, PATHINFO_EXTENSION)) === 'svg' && self::isValidSvg($file, false)) {

Quy · 2023-01-10T19:25:14Z

No go :(

Quy · 2023-01-13T21:52:01Z

I have tested this item ✅ successfully on be07515

THANK YOU!

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39586.}

obuisard · 2023-01-14T16:21:03Z

I have been doing some testing and I would like to know if someone got into this one:

on my tests, everything works great (yeah!) on my php 8 environments. However, uploads fail and thumbnails don't show in php 7.4 in the media manager. I will retry with the full package (I just tried the PR's update package) and see if I get the same issues.

Nevertheless, I wanted to mention it and see if others ran into the same problems. I don't have any errors in logs or console errors either.

dgrammatiko · 2023-01-14T16:26:42Z

However, uploads fail and thumbnails don't show in php 7.4 in the media manager

Are those svg files or any image?
Also couple of things: what are the contents of mime.types of your 7.4 apache? In particular is there an uncommented line with svg image/svg+xml?
But this might come from the Sanitizer, which is a bug revealed by this PR and probably worth a new issue

obuisard · 2023-01-14T17:03:56Z

However, uploads fail and thumbnails don't show in php 7.4 in the media manager

Are those svg files or any image?

Only SVG images.

Also couple of things: what are the contents of mime.types of your 7.4 apache? In particular is there an uncommented line with svg image/svg+xml?

image/svg+xml is uncommented in mime.types.

Note that I use the same Apache for php 7 and 8 tests.

I will try in another environment (tried initially in Wampserver).

dgrammatiko · 2023-01-14T17:06:27Z

@obuisard set a break point here: https://github.com/joomla/joomla-cms/pull/39586/files#diff-b9cf1b73ab2438daa98290f2c650099e320527df061d94e31763982e9743dacdR514 do you get any errors or the sanitisation completes correctly?

obuisard · 2023-01-15T17:19:26Z

@obuisard set a break point here: https://github.com/joomla/joomla-cms/pull/39586/files#diff-b9cf1b73ab2438daa98290f2c650099e320527df061d94e31763982e9743dacdR514 do you get any errors or the sanitisation completes correctly?

It does not even get there.
The only thing I can see is that, when I drag and drop a clean SVG file file under Apache with PHP 8, I get
POST /administrator/index.php?option=com_media&format=json&mediatypes=0,1,2,3&task=api.files&path=local-images:/ HTTP/1.1" 200
But under PHP 7, I get
POST /administrator/index.php?option=com_media&format=json&mediatypes=0,1,2,3&task=api.files&path=local-images:/ HTTP/1.1" 403

dgrammatiko · 2023-01-15T17:21:39Z

@obuisard then that's another issue

obuisard · 2023-01-15T17:24:34Z

@obuisard then that's another issue

Agree, just can't figure out what it is. We need someone else to test your PR. Reaching out.

dgrammatiko · 2023-01-15T17:25:50Z

@obuisard can you email me you php 7.4 ini file?

dgrammatiko · 2023-01-15T18:32:48Z

@obuisard fwiw the issue is not related as it's (probably) coming from

joomla-cms/administrator/components/com_media/src/Controller/ApiController.php

Lines 188 to 190 in 4dcee69

    
           if (!$this->app->getIdentity()->authorise('core.create', 'com_media')) { 
        
               throw new \Exception(Text::_('JLIB_APPLICATION_ERROR_CREATE_RECORD_NOT_PERMITTED'), 403); 
        
           }

which seems a invalid token or something similar...

sdwjoomla · 2023-01-16T00:04:26Z

I have tested this item 🔴 unsuccessfully on be07515

PHP 7.4.21
Unable to upload SVG.
Content > Media > Upload > selected image > "Upload button"
Outcome: message "An error occurred." and image didn't upload

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39586.}

dgrammatiko · 2023-01-16T00:43:59Z

@sdwjoomla can you try uploading the same svg on the 4.3-dev branch (not this pr)?
if it’s failing there then you have another issue that this pr revealed…

sdwjoomla · 2023-01-16T04:05:04Z

@dgrammatiko
Retesting ... actions taken and the outcome listed below ... all testing done in PHP 7.4 except where noted.

Downloaded Joomla_4.3.0-alpha3-dev+pr.39586-Development-Full_Package.zip
Image uploaded. Media manager Info does not include dimensions when on PHP7.4. but does on PHP8.0.

Clicking the vertical three dot menu and selecting Preview displays the image correctly. Thumbnail does not display.
Selecting the image as logo for the template worked and shows the correct dimensions.

Tried upload a new SVG, no change to settings, received error "unable to upload file"
Checked settings and file sizes - no issues with them.

In Cassiopeia, changed logo back to a PNG, saved, then changed back to SVG, the dimensions displayed incorrectly as 0 width and 0 height.

Manually added SVG to the images folder on the server, thumbnail displays, selected the image in the media manager and clicked the 'i' icon/link, the dimensions display correctly
Selected the new image as a logo, the dimensions display correctly as images/SimplePurpleCarTopView.svg#joomlaImage://local-images/SimplePurpleCarTopView.svg?width=148&height=73

Downloaded Joomla_4.3.0-alpha3-dev-Development-Full_Package.zip
Used https://ci.joomla.org/artifacts/joomla/joomla-cms/4.3-dev/39586/downloads/60858/pr_list.xml to apply PR
Tried to upload a SVG, no change to settings, received error "unable to upload file"
Checked settings and file sizes - no issues with them.
Manually added SVG to the images folder on the server, thumbnail displays, selected the image in the media manager and clicked the 'i' icon/link, the dimensions display correctly
Selected the new image as a logo, the dimensions display correctly as images/cyberscooty-kids_smiling.svg#joomlaImage://local-images/cyberscooty-kids_smiling.svg?width=165&height=150

Please note there is a typo in the testing instructions, image\svg+xml, should be image/svg+xml

dgrammatiko · 2023-01-16T10:11:20Z

@obuisard @sdwjoomla fwiw both 4.2 and 4.3 failed to upload svg with 7.4. Anyways, the problem is the returning mime type, with php 8+ we get application/octet-stream but with php 7 we get image/svg which is not valid.
This should be fixed now.
Could you check, retest?

@Quy sorry can we have one more retest here?

Thanks

obuisard · 2023-01-16T15:19:41Z

Your last changes fixed everything on my test sites. Thumbs up for your PR, Dimitris @dgrammatiko and help in figuring out what was wrong on our tests.

obuisard · 2023-01-16T15:19:59Z

I have tested this item ✅ successfully on dfcf205

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39586.}

Quy · 2023-01-16T17:29:20Z

I have tested this item ✅ successfully on dfcf205

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39586.}

Quy · 2023-01-16T17:29:30Z

RTC

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/39586.}

obuisard · 2023-01-16T17:56:24Z

Thank you Dimitris @dgrammatiko for this PR!

dgrammatiko · 2023-01-16T18:01:41Z

@Quy @obuisard @sdwjoomla thanks for the tests
@crystalenka thanks for the preview css

@SniperSister @HLeithner please consider using a composer package for the mime types

fix svg sizing

eb25858

joomla-cms-bot added NPM Resource Changed This Pull Request can't be tested by Patchtester PR-4.3-dev labels Jan 10, 2023

dgrammatiko commented Jan 10, 2023

View reviewed changes

libraries/src/Helper/MediaHelper.php Outdated Show resolved Hide resolved

dgrammatiko added 2 commits January 10, 2023 09:32

PATHINFO_EXTENSION, thanks @laoneo

bdba332

cs

ed67f35

dgrammatiko mentioned this pull request Jan 10, 2023

[4.2] Clean the logo URL in Cassiopeia #39574

Merged

4 tasks

dgrammatiko added 3 commits January 10, 2023 13:40

Reuse the existing validator, thanks @SniperSister for the guidance

b9bc3b6

Skip the queuing of error msgs for the file lists

b2e2120

Use the store, ie proper impl…

5727196

dgrammatiko changed the title ~~[4.3] Fix svg width/height~~ [4.3] Media Manager support for svg images + set natural{width/height} Jan 10, 2023

no capture, cs

d3e3f5d

Quy reviewed Jan 10, 2023

View reviewed changes

administrator/components/com_media/resources/scripts/store/mutation-types.es6.js Outdated Show resolved Hide resolved

Update administrator/components/com_media/resources/scripts/store/mut…

c01c840

…ation-types.es6.js Co-authored-by: Quy <quy@nomonkeybiz.com>

there’s an extra backslash

f8dbce2

7.4

dfcf205

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Jan 16, 2023

Merge branch '4.3-dev' into 4.3-dev-svg-size

7dae46c

obuisard added this to the Joomla! 4.3.0 milestone Jan 16, 2023

obuisard merged commit 31758bb into joomla:4.3-dev Jan 16, 2023

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Jan 16, 2023

dgrammatiko deleted the 4.3-dev-svg-size branch January 16, 2023 18:01

This was referenced Jan 24, 2023

Sort the Media files from the Media list. #39703

Closed

Missing fileinfo #39711

Closed

dgrammatiko mentioned this pull request Mar 13, 2023

Not able to upload svg file #38532

Open

Uh oh!

Conversation

dgrammatiko commented Jan 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary of Changes

In pictures

Testing Instructions

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Link to documentations

Uh oh!

Uh oh!

viocassel commented Jan 10, 2023

Uh oh!

Uh oh!

Quy commented Jan 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dgrammatiko commented Jan 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Quy commented Jan 10, 2023

Uh oh!

Quy commented Jan 10, 2023

Uh oh!

dgrammatiko commented Jan 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Quy commented Jan 10, 2023

Uh oh!

dgrammatiko commented Jan 10, 2023

Uh oh!

dgrammatiko commented Jan 10, 2023

Uh oh!

Quy commented Jan 10, 2023

Uh oh!

dgrammatiko commented Jan 10, 2023

Uh oh!

Quy commented Jan 10, 2023

Uh oh!

Quy commented Jan 10, 2023

Uh oh!

dgrammatiko commented Jan 10, 2023

Uh oh!

Quy commented Jan 10, 2023

Uh oh!

Quy commented Jan 13, 2023

Uh oh!

obuisard commented Jan 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dgrammatiko commented Jan 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

obuisard commented Jan 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dgrammatiko commented Jan 14, 2023

Uh oh!

obuisard commented Jan 15, 2023

Uh oh!

dgrammatiko commented Jan 15, 2023

Uh oh!

obuisard commented Jan 15, 2023

Uh oh!

dgrammatiko commented Jan 15, 2023

Uh oh!

dgrammatiko commented Jan 15, 2023

Uh oh!

sdwjoomla commented Jan 16, 2023

Uh oh!

dgrammatiko commented Jan 16, 2023

Uh oh!

sdwjoomla commented Jan 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dgrammatiko commented Jan 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

obuisard commented Jan 16, 2023

dgrammatiko commented Jan 10, 2023 •

edited

Loading

Quy commented Jan 10, 2023 •

edited

Loading

dgrammatiko commented Jan 10, 2023 •

edited

Loading

dgrammatiko commented Jan 10, 2023 •

edited

Loading

obuisard commented Jan 14, 2023 •

edited

Loading

dgrammatiko commented Jan 14, 2023 •

edited

Loading

obuisard commented Jan 14, 2023 •

edited

Loading

sdwjoomla commented Jan 16, 2023 •

edited

Loading

dgrammatiko commented Jan 16, 2023 •

edited

Loading