I have tested this item ✅ successfully on ed67f35

?

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.

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"
}

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

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

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

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

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...

@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

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/" }

Thanks, so the values are correct...

This is only happening with SVG files.

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

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)) {

No go :(

Weird, can you replace the whole function with

    public static function getMimeType($file, $isImage = false)
    {
        // If we can't detect anything mime is false
        $mime = false;

        if (strtolower(pathinfo($file, PATHINFO_EXTENSION)) === 'svg' && self::isValidSvg($file, false)) {
            return 'image/svg+xml';
        }

        try {
            if ($isImage && \function_exists('exif_imagetype')) {
                $mime = image_type_to_mime_type(exif_imagetype($file));
            } elseif ($isImage && \function_exists('getimagesize')) {
                $imagesize = getimagesize($file);
                $mime      = $imagesize['mime'] ?? false;
            } elseif (\function_exists('mime_content_type')) {
                // We have mime magic.
                $mime = mime_content_type($file);
            } elseif (\function_exists('finfo_open')) {
                // We have fileinfo
                $finfo = finfo_open(FILEINFO_MIME_TYPE);
                $mime  = finfo_file($finfo, $file);
                finfo_close($finfo);
            }
        } catch (\Exception $e) {
            // If we have any kind of error here => false;
            return false;
        }

        // If we can't detect the mime try it again
        if ($mime === 'application/octet-stream' && $isImage === true) {
            $mime = static::getMimeType($file, false);
        }

        // We have a mime here
        return $mime;
    }

Many SVG files do not have inherent width/height set, but they are valid. Could that be why it's failing?

Many SVG files do not have inherent width/height set, but they are valid. Could that be why it's failing?

Nope, the failure is a 404, file not found, probably an edge case server weirdness...

Weird, can you replace the whole function with

Same error.

Same error.

Ok, let me recap the problem here:

• the svg is uploaded through the media manager
• the image is displayed in the media manager but the sidebar doesn't have and dimensions
• selecting the image in the form field media throws a console error with a url pointing to /administrator/images

Do I got it correctly?

Yes, plus no preview in media manager and does not display on the front end.

Yes, plus no preview in media manager and does not display on the front end.

And just to confirm this is the file on the zip you've posted few comments above? If not can you please share the file?

Yes, that is the file.

Ok, so I edited the mime.types on my apache conf folder /opt/homebrew/etc/httpd and removed the svg support like

and got this

and

Probably I could patch the media field js to skip the width and height if the values are 0, but honestly this is a server misconfiguration to me. I mean if you cannot see the images selecting them for usage is not very wise as they will not appear also on the front end...

I will test it on a live server to see if it is a local issue. I will report back later today or tomorrow. Thank you!

I will report back later today or tomorrow

Take your time, this PR awaits the review of the security team, so nothing too urgent. Also thank you for your time here ?

@Quy what was your browser? (I should have asked that many comments earlier)

Ok I can reproduce this, it's a FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1328124 And now I have to think of some ugly code that will replicate the missing functionality. (I hate browser inconsistencies)

Windows Firefox 108.0.2, but also tested with Chrome.

@Quy I added fallback values for FF till I could think something more clever, now FF is working correctly but the aspect ratio (what width and size is used for) is probably wrong, so always use CSS for the sizing of SVG images...

Works locally/live server except for the Preview action. ?

Tested on cloudaccess.host. No preview image using Chrome Version 109.0.5414.75.

Tested on cloudaccess.host. No preview image using Chrome Version 109.0.5414.75.

Ok, svg images will not have a preview modal (until we find a way to get the image drawing consistently)...

Why not set an arbitrary height and width (like 60vw and 60vh) to the svg and use object-fit: contain to preserve the aspect ratio in cases where there is no detectable height or width?

Why not set an arbitrary height and width (like 60vw and 60vh) to the svg and use object-fit: contain to preserve the aspect ratio in cases where there is no detectable height or width?

I've tried quite some tricks (also setting some hardcoded values) but the problem is that FF is not actually rendering anything. That said, I will also try your suggestion.
The other problem with the preview modal is due to some funky code (either my bad or something is unsetting the selected image, I will try to debug this the coming weekend)

If you care to dig deeper on the Firefox issue there are some links
https://bugzilla.mozilla.org/show_bug.cgi?id=1328124
https://bugzilla.mozilla.org/show_bug.cgi?id=700533
whatwg/html#3510
Hopefully this will be resolved at some point...

As a middle ground solution I was thinking exposing 2 inputs for width/height, similar to the options we have when the image selected goes into an editor. But that's a rough idea right now, I need to see if there are problems with the existing code before proposing something...

The preview image is full width so it displays huge. Maybe reduce it so the title/close button will be more visible.

Maybe reduce it so the title/close button will be more visible.

Any suggestions? @crystalenka proposed (like 60vw and 60vh), shall I use that? Also 60vw for all screen sizes or have a breakpoint, eg 768px where the 60vw will be used and for smaller screens keep the current full screen? Basically, all I try to write here is that the size should be responsive so a one value fits all doesn't really work...

Since vw and vh are relative sizes it should be fairly responsive. I don't think you need to do breakpoints for this but maybe using a minmax or clamp function would help.

like width: clamp(300px, 1000px, 75vw)

And then having height as 60vh-70vh ish should be fine with object fit set to contain

Forgive me if the syntax is wrong, I'm replying from my phone.

I hope that syntax worked okay ??

I have tested this item ✅ successfully on be07515

THANK YOU!

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.

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

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).

@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 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

@obuisard then that's another issue

@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.

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

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

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

@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…

@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

@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

I have tested this item ✅ successfully on dfcf205

I have tested this item ✅ successfully on dfcf205

RTC

Thank you Dimitris @dgrammatiko for this PR!

@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