New Froala Editor v5.0.0 is here – Learn More
Froala Documentation
3rd Party Integration
Filestack
Filestack is a service that provides a set of tools and powerful APIs for uploading, transforming, and delivering content easily. You can use Filestack to handle files of various types, such as images, documents, and videos, and apply different operations on them, such as resizing, cropping, converting, optimizing, and more. You can also use Filestack to serve your files globally with speed and reliability, using its CDN and custom domain features. Additionally, you can use Filestack to analyze the content of your files and get insights into their properties, such as tags, captions, sentiments, detections, and more.
Froala V4.3+ offers an official
Filestack plugin.
Try it yourself:
Demo #1: Basic Mode
Filestack File Picker and Transformation UI will add to the existing options for image/video/file upload and image transformations.
HTML
<!-- Load Froala Editor CSS files. -->
<link href='https://cdn.jsdelivr.net/npm/froala-editor@4.3/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<!-- Load Filestack File Picker CSS files. -->
<script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
<script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
<!-- Load Filestack Transformation UI JS & CSS files. -->
<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
<!-- Load Froala Editor JS files. -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@4.3/js/froala_editor.pkgd.min.js'></script>
<div id="editor">
</div>
JAVASCRIPT
// Initialize the Froala Editor
var editor = new FroalaEditor('#editor', {
imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'filestackIcon', 'imageTUI'],
filestackOptions: {
uploadToFilestackOnly: false,
filestackAPI: '***',
pickerOptions: {
fromSources: [
'local_file_system',
'imagesearch',
'url',
'googledrive',
'facebook',
],
accept: [
".pdf",
"image/jpeg",
"image/png",
"image/webp",
"video/*",
"audio/*"
],
transformations: {
"crop": true,
"rotate": true
}
},
},
});
Demo #2: Advanced (Filestack-only) Mode
Filestack Advanced will enforce Filestack options for all file upload features in Froala, replacing the default options on toolbars
HTML
<!-- Load Froala Editor CSS files. -->
<link href='https://cdn.jsdelivr.net/npm/froala-editor@4.3/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
<!-- Load Filestack File Picker CSS files. -->
<script src="https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js"></script>
<script src="https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js"></script>
<!-- Load Filestack Transformation UI JS & CSS files. -->
<script src="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js"></script>
<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
<!-- Load Froala Editor JS files. -->
<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@4.3/js/froala_editor.pkgd.min.js'></script>
<div id="editor">
</div>
JAVASCRIPT
// Initialize the Froala Editor
new FroalaEditor('#editor', {
filestackOptions: {
uploadToFilestackOnly: true,
filestackAPI: "yourFilestackAPIkey"
},
events: {
'filestack.uploadedToFilestack': function (response) {
console.log("Callback is triggered for uploaded to filestack ",)
},
'filestack.filestackPickerOpened': function (response) {
console.log("Callback is triggered for picker opened ",)
},
'filestack.filestackPickerClosed': function (response) {
console.log("Callback is triggered for picker closed ",)
},
'filestack.uploadFailedToFilestack': function (response) {
console.log("Callback is triggered for file stack failed ",)
},
},
});
Demo #3: Enable TUI after Image Uploads
Filestack’s Transformation UI is an advanced image editor that enhances your images with just a few clicks. You can adjust brightness, contrast, and size, and apply filters and effects for a professional look. The real-time preview allows you to make adjustments until you achieve the desired result.
To make the Transformation UI available right after uploading an image with the "Filestack Image Upload" button, enable the transformationsUI option in the filestackOptions.pickerOptions settings.
// Initialize the Froala Editor
new FroalaEditor('#editor', {
filestackOptions: {
uploadToFilestackOnly: true,
filestackAPI: "yourFilestackAPIkey",
pickerOptions: {
transformationsUI: true,
}
},
});
