Rails action_text no upload after switching to amazon active storage

Question

When I attach image or other file in action_text (using trix editor), the image displays with a greyed out progress bar and no progress is made and the file is never uploaded.

I get this in my log:

Started POST "/rails/active_storage/direct_uploads" for 127.0.0.1 at 2020-09-21 14:34:32 -0400
Processing by ActiveStorage::DirectUploadsController#create as JSON
  Parameters: {"blob"=>{"filename"=>"20190114_085126.jpg", "content_type"=>"image/jpeg", "byte_size"=>2865061, "checksum"=>"B2V2/VIDZ0oijiVW/57ZOQ=="}, "direct_upload"=>{"blob"=>{"filename"=>"20190114_085126.jpg", "content_type"=>"image/jpeg", "byte_size"=>2865061, "checksum"=>"B2V2/VIDZ0oijiVW/57ZOQ=="}}}
   (0.3ms)  BEGIN
  ActiveStorage::Blob Create (1.3ms)  INSERT INTO "active_storage_blobs" ("key", "filename", "content_type", "byte_size", "checksum", "created_at") VALUES ($1, $2, $3, $4, $5, $6) RETURNING "id"  [["key", "8l50q4ttoz20x6ixwvgnefodu9p6"], ["filename", "20190114_085126.jpg"], ["content_type", "image/jpeg"], ["byte_size", 2865061], ["checksum", "B2V2/VIDZ0oijiVW/57ZOQ=="], ["created_at", "2020-09-21 18:34:32.952044"]]
   (0.5ms)  COMMIT
[Aws::S3::Client 0 0.000591 0 retries] put_object(content_type:"image/jpeg",content_length:2865061,content_md5:"B2V2/VIDZ0oijiVW/57ZOQ==",bucket:"mweiser-testbucket",key:"8l50q4ttoz20x6ixwvgnefodu9p6")

  S3 Storage (1.5ms) Generated URL for file at key: 8l50q4ttoz20x6ixwvgnefodu9p6 (https://mweiser-testbucket.s3.amazonaws.com/8l50q4ttoz20x6ixwvgnefodu9p6?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA4MREWXD52IVDRYOD%2F20200921%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20200921T183432Z&X-Amz-Expires=300&X-Amz-SignedHeaders=content-length%3Bcontent-md5%3Bcontent-type%3Bhost&X-Amz-Signature=31e7a09e7d120c56a89592e8c0a5df46a91e23a32d1af7bf1a513d013a4ab264)
Completed 200 OK in 13ms (Views: 0.2ms | ActiveRecord: 2.1ms | Allocations: 3426)

I have tested with calling s3 directly (see code below) and the uploads work.

>> s3 = Aws::S3::Client.new
=> #<Aws::S3::Client>
>> res = Aws::S3::Resource.new  
=> #<Aws::S3::Resource:0x000000000a59eed0 @client=#<Aws::S3::Client>>
>> bucket = res.bucket('mweiser-testbucket')
=> #<Aws::S3::Bucket:0x000000000a735cf8 @name="mweiser-testbucket", @data=nil, @client=#<Aws::S3::Client>, @waiter_block_warned=false, @arn=nil>
>> obj = bucket.object('testfile.pdf')
=> #<Aws::S3::Object:0x000000000a759388 @bucket_name="mweiser-testbucket", @key="testfile.pdf", @data=nil, @client=#<Aws::S3::Client>, @waiter_block_warned=false>
>> result = obj.upload_file('./erd.pdf')
=> true
[Aws::S3::Client 200 0.380179 0 retries] put_object(bucket:"mweiser-testbucket",key:"testfile.pdf",body:#<File:./erd.pdf (51715 bytes)>)  

And voila... my file is uploaded. My credentials are all in 1 places, so it's not a permissions issue. The action_text works perfect with :local.

Did I miss something?

Answer 1

Found the solution... CORS setting for the bucket.

Found here: https://gorails.com/episodes/how-to-use-action-text

Turns out it was a CORS issue, which Chris made a video about here: https://gorails.com/episodes/cross-origin-resource-sharing-with-rails?autoplay=1

In addition to that, I had to set my CORS configuration in my S3 bucket settings. This was the configuration that ended working for me:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>