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?

score 5 · Answer 1 · answered Sep 21 '20 at 20:49

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>

This indeed works, but it would be much better to set your AllowedOrigins to only those that you control (ie. your domain). For instance, with this configuration, anyone could put and post to your s3 bucket. I'd suggest changing the `*` to `https://www.example.com`. — sam, Jan 27 '21 at 02:55

Rails action_text no upload after switching to amazon active storage

1 Answers1