upload froala images on s3

Question

I am using react-froala-wysiwyg editor in my application. but i am having trouble uploading images on s3 bucket. when i am trying to upload images on the s3; s3 returns error forbidden: 403.

Can anyone share the configuration for uploading image on the s3 for reactjs.

Following is my configuration.

var config = {

  imageUploadToS3: {
    bucket: 'testing-s3upload',
    // Your bucket region.
    region: 'us-east-1',
    keyStart: 'froalaUploads/',
    params: {
      acl: 'public-read',
      AWSAccessKeyId: 'xxxxxxxxx',
      AWSSecretAccessKey: 'xxxxxxxxxxxxxxxxxxxx',
      policy: '', // i have no policy applied on my bucket.
      signature: '',
    }
  }
}

Answer 1

Asper the froala editor documentation:

In order to get the image uploaded to S3, it is necessary to compute a signature using the AWS access key ID and AWS secret access key and provide it together with the upload request. The rich text editor Ruby SDK comes with methods to compute the S3 signature using the V4 signing algorithm that works with buckets created on any of the S3 regions.

They have also provided with a sample:

class UploadController < ActionController::Base

  ...

  def index
    # Configuration object.
    options = {
      # The name of your bucket.
      bucket: 'bucket-name',

      # S3 region. If you are using the default us-east-1, it this can be ignored.
      region: 'eu-west-1',

      # The folder where to upload the images.
      keyStart: 'uploads',

      # File access.
      acl: 'public-read',

      # AWS keys.
      accessKey: 'YOUR_AWS_ACCESS_KEY',
      secretKey: 'YOUR_AWS_SECRET_KEY'
    }

    # Compute the signature.
    @aws_data = FroalaEditorSDK::S3.data_hash(options)
  end

  ...

end

In your case you have not created a signature, that must be the error.

Official Link