S3 upload help -- likely user error :)

[mseverini]

I am brand new to fog and S3, so I am likely doing something wrong, but I cannot seem to get a signed url from s3 using put_object_url.

I have a react app on the frontend that connects to a rails backend using graphql. I would like to upload a picture to s3 from my fontend, but to do so I need a signed url form the realist server. here is what my signing controller code looks like:

def sign
    storage = Fog::Storage.new( provider: 'AWS', aws_access_key_id: ENV['s3_key'], aws_secret_access_key: ENV['s3_secret'])

    storage.sync_clock

    options = {path_style: true}
    headers = {"Content-Type" => params[:contentType], 'Access-Control-Allow-Origin' => '*', "x-amz-acl" => "public-read"}

    url = storage.put_object_url('my-buket-name', "user_uploads/#{params[:objectName]}", 15.minutes.from_now.to_time.to_i, headers, options)

    respond_to do |format|
      format.json { render json: {signedUrl: url} }
    end
  end

however when the url comes back I get a signature mismatch. I can do tother things with those credentials in fog (like storage.directories.create) but it won't give me a signed url.

Any help here would be really appreciated. I have been banging my head against this for a while.

rails 5.2
fog aws 2.0

[geemus]

Hmm, I'm not seeing anything obvious off hand. It may have to do with how you are using the URL, rather than how you are using it. For instance, are you using a PUT to the URL? Maybe you could provide a bit more detail around how you are using it and that will point us in the right direction? Thanks!

[mseverini]

Sure my frontend code that hits and uses this controller is using react-dropzone-s3-uploader like so

import React from 'react'
import DropzoneS3Uploader from 'react-dropzone-s3-uploader'

class ImageUpload extends React.Component {
  constructor(props) {
    super(props)

    this.state = { picture: props.picture}
    this.handleDrop = this.handleDrop.bind(this)
  }

  handleDrop(info) {
    let url = "https://s3.region.amazonaws.com/my-bucket/user_uploads/"+info.file.name
    this.state.picture = url
    this.props.onUpload(url)
  }

  render() {
    const s3Url = 'http://my-bucket.amazonaws.com'

    return (
      <section>
        {this.state.picture || this.props.picture ?
          <img src={this.state.picture ? this.state.picture : this.props.picture} alt="image preview"/> :
          <DropzoneS3Uploader onFinish={this.handleDrop} s3Url={s3Url} />
        }
      </section>
    )
  }
}

export default ImageUpload

It is definitely doing a put request. I managed to get what I needed using the aws-sdk for ruby in my singing controller as so (so I no longer need fog to get this to work):

s3 = Aws::S3::Resource.new(region:'region')

obj = s3.bucket('my-bucket').object("user_uploads/#{params[:objectName]}")

url = URI.parse(obj.presigned_url(:put))

respond_to do |format|
   format.json { render json: {signedUrl: url} }
end

still a bit confused as to why fog was not working though.

[geemus]

It looks like in the new usage you pass region arguments, but you didn't in the fog usage? That might be at least partly at fault. In any event, I'm glad you found a way to get it working so perhaps we need not worry further about it. Thanks for the detailed update.