Trix: Uploading images

[alejorivera]

Hey guys, I followed your example for uploading images but couldn't get it to work with my own Cloudfront distribution. Is there a specific setup that I need to do to get this working?

I know this is not 100% trix specific, but I'd really appreciate the help : )

[javan]

Does your XHR upload succeed? Are you getting any JavaScript errors?

[alejorivera]

I got it to work!

What I had to do was to:

• Edit the CORS configuration on S3 to allow for POST requests, like so:

<CORSRule>
        <AllowedOrigin>MY_DOMAIN</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
</CORSRule>

Grant permission to Everyone to upload to my bucket:

And in Cloudfront:

• Enable POST requests
• Whitelist the 'Origin' Header.

Don't know if this is the best way to do it. If you have any advise I'd love to hear it. And hopefully this is helpful to someone else!

[javan]

:tada: That's more or less how trix-editor.org's upload bucket is configured.

[iraszl]

In case somebody needs it. Here is the updated CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

[aksharj]

hi @iraszl,

When using active storage which is configured with S3, do we still need the attachments.js?

[iraszl]

hi @iraszl,

When using active storage which is configured with S3, do we still need the attachments.js?

I believe not.

[aksharj]

Thanks @iraszl for your reply. I am trying to implement direct upload to S3, but strangely even after making the bucket public and use these cors setting, i see access denied message.

Would there be any other setting i need to make to direct upload images to AWS S3?

[iraszl]

Thanks @iraszl for your reply. I am trying to implement direct upload to S3, but strangely even after making the bucket public and use these cors setting, i see access denied message.

Would there be any other setting i need to make to direct upload images to AWS S3?

• Set the Block public access to OFF, OFF, ON, ON.
• And the Access Control List to Public Access: List Objects, and Write Objects allowed.
• If there is a CDN (Cloudfrount) Enable POST requests.

Let me know if worked!

[aksharj]

many thanks @iraszl, that worked!

Can you please point me to relevant documentation, i found that i could not clearly understand the public access settings.

[iraszl]

many thanks @iraszl, that worked!

Can you please point me to relevant documentation, i found that i could not clearly understand the public access settings.

You probably already found this, I have nothing else: https://docs.aws.amazon.com/AmazonS3/latest/dev/access-control-block-public-access.html

[aksharj]

Thanks @iraszl