Wysiwyg-editor: Is there an option to specify the amazon cloudfront domain?

[lionellei]

I didn't see the option being available in the documentation, is it even supported?

[lionellei]

By the way, does it support other cloud besides S3?

[stefanneculai]

There is no option to set the amazon Cloudfront domain. However you should be able to use https://github.com/froala/wysiwyg-editor/issues/404#issuecomment-70906962 to upload to S3 directly from the editor and then change the URL in the callback. Only S3 is supported for the moment.

[stefanneculai]

I am closing this due to lack of response.

[p1Machado]

I now this issue is old, but I want to show how I did to upload a image and insert it with cloudfront.

Using the event .on('froalaEditor.image.beforeUpload', function (e, editor, images), I did the upload by myself and retrieved the object key. Then used editor.image.insert(cloudfront_object_url) to let Froala do his thing with the image. Last return false to stop the Froala standard upload flow.

document.addEventListener("DOMContentLoaded", function(){
      $('#text-editor').froalaEditor({
      }).on('froalaEditor.image.beforeUpload', function (e, editor, images) {
        var file = images[0];
        var xhr = new XMLHttpRequest();
        var form = new FormData();
            var fileKey = "banana";
            form.append("key", fileKey);
            form.append("AWSAccessKeyId", "<%= ENV['AWS_ACCESS_KEY_ID'] %>");
            form.append("acl", "private");
            form.append("policy", "<%= policy_attachment %>");
            form.append("signature", "<%= signature_attachment %>");
            form.append("Content-Type", "image/jpeg");
            form.append("file", file);
            xhr.open("POST", "https://blablabla.cloudfront.net/", true);
            xhr.onload = function() {
              if (this.status >= 200 & this.status < 300) {
                editor.image.insert("https://blablabla.cloudfront.net/" + fileKey);
              }
            }
            xhr.send(form);
        return false;
      })
    });

[webexpert4rv]

+1

[siasjustin]

@p1Machado this is really cool and I am trying to do the same thing and looking all over the internet for this answer, but can you explain how you are setting up what is the filekey? Also, any way to know what your policy_attachment and signature_attachment are?

[p1Machado]

@siasjustin

My strategy to generate the filekey was a combination of the {user_id}/{object content's hash}. If I remember, guess it was a MD5 hash.

The policy and signature is required for AWS S3. Which is storing the objects.
I did it like that:

require 'base64'
require 'openssl'
require 'digest/sha1'

class S3Signer
  class << self
    def policy_data(key_condition)
      Base64.encode64(
        {
          "expiration": 1.day.from_now.iso8061,
          "conditions": [
            {"bucket": "blablablabucketname"},
            ["starts-with", "$key", key_condition],
            {"acl": "private"},
            ["eq", "$Content-Type", "image/jpeg"]
          ]
        }.to_json
      ).gsub("\n", "")
    end

    def signature_data(policy)
      Base64.encode64(
        OpenSSL::HMAC.digest(
          OpenSSL::Digest::Digest.new('sha1'),
          ENV['AWS_SECRET_ACCESS_KEY'], policy)
        ).gsub("\n", "")
    end
  end
end

This pair of tokens are used to determine what your server allows the client side to upload. The attribute ["starts-with", "$key", key_condition], is describing that the fileKey must start with the content you want. In my case, the fileKey must always point the "{user_id}/"

All this configuration details is a quite confusing, you will need to dig into the docs.
Good luck :+1: