0
votes

I am trying to upload image to AWS S3 from Floara editor,and using angular io and nodejs frameworks.

Froala function to generate hash/signature

var configs = {
        bucket: 'web.document.images',
        region: 'ap-south-1',    
        keyStart: 'image',
        acl: 'public-read',
        accessKey: "MyAWSaccessKey",
        secretKey: "AWSsecretkey",
      }
var s3Hash = FroalaEditor.S3.getHash(configs);  
res.send(s3Hash);

CORS configuration S3

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

below is the error i am getting. in console

POST https://s3-ap-south-1.amazonaws.com/web.document.images 400 (Bad Request)

and from Network tab i am able to preview as

<Error>
<Code>
InvalidArgument
</Code>
<Message>
Malformed Unicode code sequence in the field.
</Message>
<ArgumentName>
formField
</ArgumentName>
<RequestId>
B0525397B7A4F4BC
</RequestId>
<HostId>   XixTwvJmFCNPaKNpkdquQ5/XAySQ4pL3AFM2V6XeacGpAZcAP5gepD3myMo=
</HostId>
</Error>

Any help is appreciated.

Thanks.

1

1 Answers

0
votes

It was working after removing below parameters in froala editor initialization, may be because in my case i am uploading to S3, so don't need this parameters. As Froala is aware of server (S3) where we are uploading the image(i.e supported format, method etc.)

<script>
  $(function() {
    $('.selector')
      .froalaeditor({
    // Set the image upload parameter.
    imageUploadParam: 'image_param',


    // Additional upload params.
    imageUploadParams: {id: 'my_editor'},

    // Set request type.
    imageUploadMethod: 'POST',

    // Set max image size to 5MB.
    imageMaxSize: 5 * 1024 * 1024,

    // Allow to upload PNG and JPG.
    imageAllowedTypes: ['jpeg', 'jpg', 'png']
  })