AEM Image Component with uploaded SVG

Avatar

Avatar

jamiec4451712

Avatar

jamiec4451712

jamiec4451712

30-05-2018

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!

View Entire Topic

Avatar

Avatar

fernandou237618

Avatar

fernandou237618

fernandou237618

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