Upload images to cloudinary or amazonS3

[binyamindavid]

Would be nice to have documentation for loading the images to cloudinary or amazonS3. The documentation is somewhat not clear how to do this in rails, it covers php and asp.

[stefanneculai]

We'll write an article for that shortly. In the meanwhile, you can use the following gist for generating the Amazon S3 signature on Ruby: https://gist.github.com/stefanneculai/deed108fad534d0db3ff

[binyamindavid]

I am using this one too. But it needs updating.

[stefanneculai]

Could you please detail?

[pmalliak]

I added all this file in my application but still the upload to s3 isn't working. In AWS side I created a bucket and got 2 keys and created a CORS file. Do I have to create a policy and/or signature in AWS? At this moment i get "OPTIONS https://fotiadisel.eu.s3.amazonaws.com/ net::ERR_INSECURE_RESPONSE" and when I try to access http://fotiadisel.eu.s3.amazonaws.com I get ACCESS DENIED error.

Can you please give us an example of html file with the javascript code? Also I would appreciate if we had a tutorial for the actions needed on AWS side step by step. Since the froala server doesn't keep images for more than a week, this is an emergency issue in my honest opinion. Thanks in advance.

[stefanneculai]

On AWS you should get the ACCESS_KEY and the SECRET_ACCESS_KEY. These 2 keys should be used to generate signature and they should be put in the config. You could use the amazon_signature.rb as a lib and then generate the data_hash by calling AmazonSignature::data_hash. Basically in Rails the following steps should be followed.

1) Inside an initializer put the AWS config. You should replace the keys with the ones you got form Amazon.

AWS_CONFIG = {
  'access_key_id' => YOUR_ACCESS_KEY,
  'secret_access_key' => YOUR_SECRET_ACCESS_KEY,
  'bucket' => 'froala',
  'acl' => 'public-read',
  'key_start' => 'uploads/'
}

_2) Put the amazon_signature.rb file inside the lib folder._

3) In the controller compute the signature hash.

@hash = AmazonSignature::data_hash

4) Pass the options to the editor when you initialize it inside your view.

<script>
    $(YOUR_SELECTOR).editable({
       inlineMode: false,
       imageUploadToS3: {
          bucket: '<%= @hash[:bucket] %>',
          region: 's3', // Change the region if it is different
          keyStart: '<%= @hash[:key_start] %>',
          callback: function (url, key) {
            // The URL and Key returned from Amazon.
            console.log (url);
            console.log (key);
          },
          params: {
            acl: '<%= @hash[:acl] %>', // ACL according to Amazon Documentation.
            AWSAccessKeyId: '<%= @hash[:access_key] %>', // Access Key from Amazon.
            policy: '<%= @hash[:policy] %>', // Policy string computed in the backend.
            signature: '<%= @hash[:signature] %>', // Signature computed in the backend.
          }
       }
    });
</script>

5) Setup the CORS on AWS similar to https://gist.github.com/stefanneculai/deed108fad534d0db3ff#file-cors-file. The AllowedOrigin should be the domain URL where you're using the editor.

PS: We're working on improving the docs and there will be examples for the most common frameworks and programming languages.

[pmalliak]

First of all, thank you for your fast response,I did everything you said, are you sure the amazon_signature.rb goes to lib folder, I got an error when i had it there. Placed it in helpers folder and worked like a charm. The think is that still the upload doesn't work. I checked the javascript log and it gives the following error

OPTIONS https://fotiadisel.eu.s3.amazonaws.com/ net::ERR_INSECURE_RESPONSEa.Editable.uploadImage @ froala_editor.min.self-8e74bf17fe320b97a1123d98d4402284a58c4ac3b65e2c614d26413034aa9ce2.js?body=1:11(anonymous function) @ froala_editor.min.self-8e74bf17fe320b97a1123d98d4402284a58c4ac3b65e2c614d26413034aa9ce2.js?body=1:10o.event.dispatch @ jquery-2.1.0.min.self-8070b58dd98c9747352b9b17b488d65772ee9a10f29ef551d091873cc50be842.js?body=1:6o.event.add.r.handle @ jquery-2.1.0.min.self-8070b58dd98c9747352b9b17b488d65772ee9a10f29ef551d091873cc50be842.js?body=1:6

where "fotiadisel.eu" is my bucket's name.

ps. do i have in CORS to set the root url of my site or the url where the form is, and if its for the form url is it possible to add multiple urls? I tried all the possible options for my problem though.

Thanks in advance!

[pmalliak]

Ok the problem it was the I named the bucket with a that contains "." For some reason it wouldn't let it go though secure connection (https). When i changed the name to "fotiadis" it worked!

Thanks again for your help.

[desheikh]

Here's a gist using aws-sdk-ruby and V4 signatures.

https://gist.github.com/desheikh/1fd19cae06f92a9f8aadfd866730a1d2

[shalafister]

How can we delete the images that are uploaded to amazon s3 bucket by using Froala?

[marcmoo]

@stefanneculai i saw you say you will write something to due with the cloudinary upload ---shortly---in 2015, and its been 2 yrs~,2yrs,2yrs from when you say shortly, have you got that done? lol, no blaming just wondering

[stefanneculai]

Sorry for keeping you guys waiting on this. We're doing our best here to get new features available as soon as possible. We've done huge improvements over time to the docs for uploading over to S3 and we even created a library for that: https://www.froala.com/wysiwyg-editor/docs/sdks/ruby. Cloudinary is next on the list and we'll try to bring it as soon as possible.

[nodunayo]

Hi @stefanneculai, everyone,

I have pretty much followed this setup to implement image uploading on my website: https://gist.github.com/stefanneculai/deed108fad534d0db3ff#file-amazon_signature-rb. The only thing is that I've replaced calls to self with calls to AmazonSignature, since I couldn't access a hash initialised in the controller in my JS file:

Everything was working for a few days, then I had some 403 issues across my different environments. The error that came back locally was: {code: 1, message: "Image cannot be loaded from the passed link."} and I noticed that where my assets would normally have 'read' permissions enabled for 'Everyone', they were now not enabled. I tried changing the 'acl' level and when I changed it back to 'public-read' suddenly everything started working again.

My CORS is currently set up like so:

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

Is there anything beyond CORS that I was meant to configure within S3?

Has anyone else suffered from intermittent 403s?

Thank you very much,

Nadia

P.S. I have a Froala license. Let me know if I should be going via another channel with this.