Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

AEM Image Component with uploaded SVG

Avatar

Level 4

On an AEM 6.4 site, I am trying to allow authors to upload SVG images to an image component.

The dialog that accepts the image is:

<image

   jcr:primaryType="nt:unstructured"

   sling:resourceType="granite/ui/components/foundation/form/fileupload"

   fieldLabel="Image"

   name="./file"

   fileNameParameter="./fileName"

   fileReferenceParameter="./img_src"

   mimeTypes="image"

   multiple="false"

   uploadUrl="${suffix.path}"

   useHTML5="true"

/>

The component simply takes the URL of the uploaded image and places it into an image element.

<img src="${component.image}"/>

When the author uploads the image, it displays in the dialog fine, and the image uploads normally. However, when the component is rendered, or when the dialog is re-opened, Chrome throws an error loading the image if I use a full path to the asset. This is because either the image is served with the header: Content-Disposition: attachment or the request fails with a 500 (image type not supported) .I completely understand the role that the content-disposition filter plays in security of the DAM, and I don't want to disable it, but there doesn't appear to be a way to disable that security for a specific mime-type.

Here's what I've tried:

- Online, a lot of people talk about configuring the Apache Sling Content Disposition Filter. This does not work, because the filter does not permit wildcards, and I can't specify every path of every SVG asset that will be uploaded.

- I looked into the Adobe CQ DefaultAttachmentTypeBlacklistService, as it seems like it might be related, but removing SVG from the blacklist there did not resolve the problem.

- I tried using the built in image component, but it doesn't support SVGs.

- I tried using the default GET for images, like at the URL .../_jcr_content/par/al_container/al-container-par/al_image_content/al_image_content.img.png, I changed ".png" to ".svg": al_image_content.img.svg, but I get a 500 error saying the image type is not supported.

All I need is for an author to be able to upload an SVG and have AEM serve that SVG back properly. There must be a way to do this. Anyone have any ideas?

Thanks!

1 Accepted Solution

Avatar

Correct answer by
Level 2

It seems there is an Adobe fix for this, to use org.apache.sling.security-1.1.12.jar.

I saw this information in this thread: SVG is not showing on Google Chrome

View solution in original post

10 Replies

Avatar

Level 10

It looks like a bug in 6.4 , here are the suggestions i have received from adobe,since 6.4 rendered svg assets with OOTB image component(drag drop image to the component), mockup your component to do what image component does, or use png, i used the png/jpeg from the renditions folder

Avatar

Level 2

Hi there, I got the same problem.

When using SVG files in AEM 6.4, the image is not displayed in Chrome. In Firefox it displays correctly.

Chrome actually thinks it is a downloadable file instead of an image.

AEM should be returning “Content-Type:image/svg+xml” but it is actually returning “Content-Disposition: attachment; filename="yt.svg"”.

Is there any solution to this?

I know I can use PNG but it is an annoying problem. It is a very basic thing.

Avatar

Level 10

Log a support ticket and report this so its fixed.

Avatar

Level 2

Where do I go to create the support ticket?

Avatar

Level 10

So i logged a day care ticket(#152132) and Adobe mentioned its a bug/known issue, SLING-7525 missing content-headers, they mentioned the response header is missing Content-Type,

Binary Provider Overlay servlet as workaround was suggested but it didn't help.

So suggestions provided by adobe:

- Upload PNG and reference PNG

- Modify code to work on similar to Image compoennt

I preferred using using rendition of svg

Avatar

Level 2

Thanks you NitroHazeDev. Your Renditions suggestion may be an alternative here.

Avatar

Correct answer by
Level 2

It seems there is an Adobe fix for this, to use org.apache.sling.security-1.1.12.jar.

I saw this information in this thread: SVG is not showing on Google Chrome

Avatar

Level 2

I tried and it did not work for me , the issue is a known one to adobe, they are working towards a fix

Avatar

Level 2

It worked, do not forget to refresh the bundle