S3 uploading and serving image with pre signed URL

Question

I am trying to upload an image to my S3 bucket through a pre-signed url. Everything works well except that when I hit the public URL for that image, the browser downloads it instead of showing it. When I upload the same image from the AWS Console, everything works well and the image gets displayed in the browser.

Here how I do it:

Generation of the pre-signed URL:

s3.getSignedUrl('putObject', {
    Bucket: myBucket,
    Key: myKey,
    Expires: signedUrlExpireSeconds
})

Upload of the file with axios:

const response = await axios.put(url, formElement.files[0])

Should I configure headers somewhere in the process to tell S3 the mime type of the content I'm uploading or something like this?

Thank you for your help

thomasmichaelwallace · Accepted Answer · 2018-10-20 09:42:57Z

9

There are two places you can do this.

If you know the type of image ahead of time, then you can explicitly set the ContentType in the s3.getSignedUrl params. This is because those params will be encoded and passed with the signed put request: getSignedUrl docs / putObject docs. So for example:

s3.getSignedUrl('putObject', {
    Bucket: myBucket,
    Key: myKey,
    Expires: signedUrlExpireSeconds,
    ContentType: 'image/png'
});

Alternatively, you can set the Content-Type header on the Axios request REST PUT docs, for example:

const response = await axios.put(
  url,
  formElement.files[0],
  { headers: { 'Content-Type': formElement.files[0].type } });

edited Oct 20, 2018 at 9:42

answered Oct 20, 2018 at 9:37

thomasmichaelwallace

8,5721 gold badge33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hammerbot Over a year ago

Thank you, doing it in the axios request works well, and I can dynamically set the content type:

const response = await axios.put(url, formElement.files[0], {           headers: {             'Content-Type': formElement.files[0].type           }         })

thomasmichaelwallace Over a year ago

Good point- I'll update the answer to include the dynamic mime typing as that's more useful :)

Collectives™ on Stack Overflow

S3 uploading and serving image with pre signed URL

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related