10 Replies Latest reply on Jul 5, 2018 12:29 PM by nicolec5933381

    AEM Image Component with uploaded SVG

    jamiec4451712 Level 1

      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.p ng, 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!