Accessing to access uploaded SVG image on AWS S3 throws download box

[samundra]

Describe the bug
Uploading of SVG images on AWS S3 bucket work fine but while trying to access it throws browser download window.

To Reproduce
Steps to reproduce the behavior:

1. Configure AWS S3 Asset Plugin as instructions on https://www.vendure.io/docs/typescript-api/asset-server-plugin/s3asset-storage-strategy/
2. Login into Admin UI
3. Go to Assets Dashboard (/admin/catalog/assets)
4. Upload SVG image as an asset
5. Add newly uploaded svg image with a collection
6. Get assets for the collection with Graphql query

query getCategories {
  collections {
    items {
      id
      name
      assets {
        source
      }
    }
  }
}

7. Get svg uploaded url from step 6 and then try to open it in browser tab
8. You would get download window thrown by browser

Expected behavior
An image is shown on browser tab instead of brower download window.

Environment (please complete the following information):

• @vendure/core version: 0.12.1
• Nodejs version:

$ node --version
v12.16.2

• Database (mysql/postgres etc):

$ mysql --version
mysql  Ver 15.1 Distrib 10.4.12-MariaDB, for debian-linux-gnu (x86_64) using readline 5.2

[michaelbromley]

Hi,

I've been attempting to reproduce this issue but cannot - see video:

Browser: Brave (Chromium 81)

[samundra]

Strange. Perhaps it was the SVG file that gave this issue. I will retry it and update it.

Update: I just tried it and still have the same issue. Can you please try with this file. This is the file that was uploaded from Admin UI Asset Dashboard.

https://dev-vendure.s3.amazonaws.com/ic-wheelchair.svg

Browser: Google Chrome, Version 85.0.4150.0 (Official Build) canary (64-bit)

[michaelbromley]

OK, looked a bit deeper into this and there was indeed a bug with correct MIME type detection. Fixed and will be available in the next release.

[julymarval]

I;m having this same error with svg images, the aws-sdk works perfectly with jpg/png images but when i upload a svg image it opens the download window and if i open that download it says in my browser this error: error on line 1 at column 1: Encoding error. This is how i'm sending the image to s3:

`let buf = new Buffer.from(image.replace(/^data:image/\w+;base64,/, ""),"base64");
let type = image.split(";")[0].split("/")[1];

  let params = {
    Bucket: process.env.BUCKET_IMAGE,
    Key: ${name.toUpperCase()},
    Body: buf,
    ContentEncoding: "base64",
    ContentType: image/${type},
  };
s3.upload(params)`

[michaelbromley]

@julymarval Are you using the AssetServerPlugin to handle uploads? I don't understand the workflow where you are sending assets to S3 yourself. Can you clarify?

[julymarval]

@julymarval Are you using the AssetServerPlugin to handle uploads? I don't understand the workflow where you are sending assets to S3 yourself. Can you clarify?

Hi @michaelbromley !!!. Sure, so I have a backoffice where i do all my configurations for my web page. One of them is to upload all my web images to a bucket in S3. I have my lambdas wrote in nodejs12 and i using the js aws-sdk 2.765.0. When i upload any image of type png or jpeg it success and the image is render in my web site with no problem. But when i upload a svg image it doesn't render in my website and when i try to open it directly from s3 i get this error: This page contains the following errors: error on line 1 at column 1: Document is empty Below is a rendering of the page up to the first error.. And this is how i'm uploading the image (it comes in base64 encoding fron the frontend) from my lambda to my s3 bucket:

` let buf = new Buffer.from(image.replace(/^data:image/\w+;base64,/, ""),"base64");

  let type = image.split(";")[0].split("/")[1];

  let params = {
    Bucket: process.env.BUCKET_IMAGE,
    Key: `${name.toUpperCase()}.${type.replace('+xml','')}`,
    Body: buf,
    ContentEncoding: "base64",
    ContentType: `image/${type}`,
    ACL: 'public-read'
  };

s3.upload(params,function(err,resp){});`

[michaelbromley]

@julymarval I have a more fundamental question: are you using Vendure? This is an issue tracker for the e-commerce framework Vendure.

If you are not using Vendure, then I suggest you try asking the question on a more general forum like StackOverflow.

[Luc-Olsthoorn]

@julymarval and whomever stumbles upon this even though its not related to Vendure,
Your regex is wrong, it does not include svg+xml, as the plus is not a \w
should be /^data:image\/(\w|\+)+;base64,/

[bsweaty]

@Luc-Olsthoorn I was led here on a similar issue and that simple change in the regex did the trick for me too. Thanks for sharing!