Wysiwyg-editor: Using forala & s3 with node - how to generate policy string

[bonesoul]

Documentation says i need to generate the policy string, any ideas?

https://editor.froala.com/options#imageUploadToS3

[stefanneculai]

Please see https://github.com/froala/wysiwyg-editor/issues/404#issuecomment-70906962.
Also, you have to set the CORS on AWS: https://gist.github.com/stefanneculai/deed108fad534d0db3ff#file-cors-file

[yglin]

Just passed by and saw this, here is my implemantation in Node.js to create neccessary data for froala.

var moment = require('moment');
var crypto = require('crypto');

var s3Config = {
    bucket: YOUR_BUCKET_NAME,
    region: 's3',
    keyStart: UPLOAD_TARGET_FOLDER + '/',
    acl: 'public-read',
    accessKeyId: YOUR_AWS_ACCESS_KEY_ID
};

s3Config.policy = {
    expiration: moment().add(1, 'days').toISOString(),
    conditions: [
        { bucket: s3Config.bucket },
        { acl: s3Config.acl },
        { success_action_status: '201' },
        { 'x-requested-with': 'xhr' },
        [ 'starts-with', '$key', s3Config.keyStart ],
        [ 'starts-with', '$Content-Type', '' ]
    ]
};
s3Config.policy = new Buffer(JSON.stringify(s3Config.policy)).toString('base64');

var hash = crypto.createHmac('sha1', YOUR_AWS_SECRET_ACCESS_KEY);
s3Config.signature = new Buffer(hash.update(s3Config.policy).digest()).toString('base64');

Then _s3Config_ will have all data needed for _imageUploadToS3_ option.
I have used additional node modules "moment" and "crypto".
Hope this may still helps someone.

[stefanneculai]

Thank you @yglin.

[jehartzog]

@yglin Thanks a ton for posting this, what you provided provided me the head start to even attempt to get this working. After a few minutes of tweaking it's up and running!

I did make some improvements I'd like to share.

• I shifted the object structure to exactly match the imageUploadToS3 parameters so you can just drop it in without any further changes.
• I fixed a typo, if you use accessKeyId the request is rejected by Amazon as is needs to be AWSAccessKeyId.

    const s3Config = {
      bucket: YOUR_BUCKET_NAME,
      region: 's3',
      keyStart: UPLOAD_TARGET_FOLDER + '/',
      params: {
        acl: 'public-read',
        AWSAccessKeyId: YOUR_AWS_ACCESS_KEY_ID,
      },
    };

    s3Config.params.policy = {
      expiration: moment().add(1, 'days').toISOString(),
      conditions: [
        { bucket: s3Config.bucket },
        { acl: s3Config.params.acl },
        { success_action_status: '201' },
        { 'x-requested-with': 'xhr' },
        ['starts-with', '$key', s3Config.keyStart],
        ['starts-with', '$Content-Type', ''],
      ],
    };
    s3Config.params.policy = new Buffer(JSON.stringify(s3Config.params.policy)).toString('base64');

    const hash = crypto.createHmac('sha1', YOUR_AWS_SECRET_ACCESS_KEY);
    s3Config.params.signature = new Buffer(hash.update(s3Config.params.policy).digest()).toString('base64');

I pass the s3Config object back from my server entirely and provide it to FroalaEditor init in the client:

const froalaConfig = {
  imageUploadToS3: s3ConfigFromServer,
  ...
};

[yglin]

@jehartzog Wow, it's been 2 years but ..... Still glad it could help you :)

[adnanrafique]

Hello, I am doing it in Angular 5. Can anyone please elaborate a little how can I do this in angular?