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!
fernandou237618
fernandou237618
03-07-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
NitroHazeDev
NitroHazeDev
20-06-2018
Sure.. no problem at all
NitroHazeDev
NitroHazeDev
20-06-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
nicolec5933381
nicolec5933381
05-07-2018
It worked, do not forget to refresh the bundle
nicolec5933381
nicolec5933381
03-07-2018
I tried and it did not work for me , the issue is a known one to adobe, they are working towards a fix
fernandou237618
fernandou237618
20-06-2018
Thanks you NitroHazeDev. Your Renditions suggestion may be an alternative here.
fernandou237618
fernandou237618
20-06-2018
Where do I go to create the support ticket?
smacdonald2008
smacdonald2008
20-06-2018
Log a support ticket and report this so its fixed.
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.
NitroHazeDev
NitroHazeDev
19-06-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