AEM Image Component with uploaded SVG | Community
Skip to main content
New Participant
May 30, 2018
Solved

AEM Image Component with uploaded SVG

  • May 30, 2018
  • 10 replies
  • 18947 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by fernandou237618

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

10 replies

New Participant
July 5, 2018

It worked, do not forget to refresh the bundle

New Participant
July 3, 2018

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

fernandou237618Accepted solution
New Participant
July 3, 2018

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

New Participant
June 20, 2018

Sure.. no problem at all

New Participant
June 20, 2018

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

New Participant
June 20, 2018

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

New Participant
June 20, 2018

Where do I go to create the support ticket?

smacdonald2008
New Participant
June 20, 2018

Log a support ticket and report this so its fixed.

New Participant
June 20, 2018

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.

New Participant
June 19, 2018

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