Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
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