- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
PHP Image S3 Upload
How it works
- Create a bucket on Amazon S3 and set the CORS for it.
- Code computes the Amazon S3 signature on the server side.
- The editor initializes with the
imageUploadToS3
option. - Uploaded images go directly to the S3 bucket without passing through the server.
Create a S3 Bucket
For information on creating a bucket and setting a region, refer to the Amazon documentation. If you have any issues creating it, please contact Amazon for getting it set up.
Set CORS on the S3 Bucket
Cross-origin resource sharing (CORS) tells Amazon from which domains to accept requests and what kind of requests. For a detailed explanation of how that works, refer to the Amazon CORS Documentation.
The following example shows the recomended configuration, remember to replace ALLOWED_URL
with the URL of the page where you are using 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
To send uploaded images 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 editor .NET 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.
// Configuration object.
$config = array(
// Your server timezone.
// Read more on: http://php.net/manual/en/timezones.php.
'timezone' => 'Europe/Bucharest',
// 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
);
// Compute the signature.
$s3Hash = FroalaEditor_S3::getHash($config);
Initialize the editor
To upload images to Amazon S3, set the imageUploadToS3
option on initialization. The editor PHP SDK computes the hash required for this as the response of the FroalaEditor_S3::getHash
method.
<script>
new FroalaEditor('.selector', {
imageUploadToS3: JSON.parse('<?php echo $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>
<?php
// Configuration object.
$config = array(
// Your server timezone.
'timezone' => 'Europe/Bucharest',
// The name of your bucket.
'bucket' => 'bucket-name',
// S3 region. If you are using the default us-east-1, it this can be ignored.
// Read more on: http://docs.aws.amazon.com/general/latest/gr/rande.html#s3_region.
'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
);
// Compute the signature.
$s3Hash = FroalaEditor_S3::getHash($config);
?>
<script>
$(function() {
$('.selector').froalaEditor({
imageUploadToS3: JSON.parse('<?php echo $s3Hash; ?>')
})
});
</script>
Additional Resources
- Building a Support System Using Laravel PHP Framework and Froala HTML Editor Software – Part 1
- Building a Support System Using Laravel PHP Framework and Froala HTML Editor Software – Part 2
- Building a Support System Using Laravel PHP Framework and Froala HTML Editor Software – Part 3
- How To Use WYSIWYG Editor In PHP
Do you think we can improve this article? Let us know.