- Back to Docs
- Install and Configure
- Image
- Server Upload
- Server Delete
- S3 Upload
- Resize
- Validation
- Image Manager
- Simple Server
- File
- Server Upload
- Server Delete
- S3 Upload
- Validation
- References
- Image
- File
- S3
Node.JS Image S3 Upload
How it works
- You create a bucket on Amazon S3 and set the CORS for it.
- Your code computes the Amazon S3 signature on server side.
- The javascript editor is initialized with the
imageUploadToS3
option. - When an image is uploaded, it is being sent directly to the S3 bucket without touching your server.
Create a S3 Bucket
Amazon explains in detail on the URL below how to create a bucket and set a region for it. If you have any troubles with creating it, please contact Amazon for getting it set up.
http://docs.aws.amazon.com/AmazonS3/latest/gsg/CreatingABucket.html
Set CORS on the S3 Bucket
Cross-origin resource sharing (CORS) mainly tells Amazon from which domains to accept requests and what kind of requests. A detailed explanation of how that works can be find in Amazon Documentation.
We recommend to add a configuration like the one below where you would replace the ALLOWED_URL
with the URL of the page where you're using the javascript editor.
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>ALLOWED_URL</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
Compute Signature
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 Node.JS 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.
var configs = { // 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 } var s3Hash = FroalaEditor.S3.getHash(configs);
Initialize the Javascript editor
To get images uploaded to Amazon S3, the imageUploadToS3
option should be set on initialization. The editor Node.JS SDK computes the hash required for this as the response of the FroalaEditor.S3.getHash
method.
<script> $.get( '/get_signature', {}) .done(function( s3Hash ) { $('#edit-amazon').froalaEditor({ imageUploadToS3: s3Hash }) }); </script>
Complete Example
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>ALLOWED_URL</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
var express = require('express'); var app = express(); var bodyParser = require('body-parser') var path = require('path'); var fs = require('fs'); var gm = require('gm').subClass({imageMagick: true}); var FroalaEditor = require('PATH_TO_FROALA_SDK/lib/froalaEditor.js'); app.use(express.static(__dirname + '/')); app.use('/bower_components', express.static(path.join(__dirname, '../bower_components'))); app.use(bodyParser.urlencoded({ extended: false })); app.get('/get_signature', function (req, res) { var configs = { // 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 } var s3Hash = FroalaEditor.S3.getHash(configs); res.send(s3Hash); });
$.get( '/get_signature', {}) .done(function( s3Hash ) { $('#edit-amazon').froalaEditor({ imageUploadToS3: s3Hash }) });