Froala 4.3: Advanced Image & Video Upload and Transformation Features
- Posted on
- By Mostafa Yousef
- In General,
Table of contents
- Filestack Integration
- Filestack Basic Implementation
- Upload
- Replace
- Image Transformations
- Filestack Advanced Implementation
- Upload
- Replace
- Image Transformations
- Why Filestack
- Configure Filestack Plugin
- Is Filestack Free?
- Other Improvements Included in The 4.3 Release
- Counting Special Characters and Emojis Toward the Character Limit
- Fixing Font Family and Font Size Issues When Integrating with Craft CMS
- Bug Fixes
- How Can I Update?
- For Froala Editor Version 2 Users:
- Try The Latest Froala Editor
- Support and Feedback
- Change Log
- Get Started
- Technical Questions

We are super excited to announce the latest and greatest milestone update for our WYSIWYG HTML Editor. Froala Editor V4.3 introduces integration with the powerful file upload and management platform, Filestack. This integration made by the new Filestack plugin offers a more reliable and faster file-uploading process. Moreover, it offers numerous file transformations all can be applied within the Froala editor.
In addition to the Filestack integration, this release also includes significant quality improvements based on valuable feedback from our users. We’ve worked hard to enhance the overall user experience.
Let’s explore the new Filestack plugin, how it works, and what it can do.
Filestack Integration
The Filestack plugin serves as the bridge between Froala and Filestack, enabling Froala users to leverage the powerful features offered by Filestack within their editing experience.
The Filestack plugin is optional. The default Froala Image and File features will remain the default options. The Filestack plugin can be activated for users who are looking for:
- Faster and 99.99% reliable upload experience.
- Easy integration with web storage providers.
- Easy and fast delivery through a reliable CDN.
- Advanced Image and File transformation capabilities.
To use the “Filestack” plugin, you should use your Filestack account. If you do not have a Filestack account, create one to obtain a Filestack API key. Your Filestack plan and the features you enabled from the Filestack marketplace determine your Filestack plugin’s enabled features. The Filestack plugin requires your API Key to be provided in the filestackOptions.filestackAPI
option.
When the Filestack Plugin is active, you have two modes based on the filestackOptions.uploadToFilestackOnly
option.
- Basic Implementation mode (Default Mode)
- Advanced Implementation mode (when
filestackOptions.uploadToFilestackOnly
is set to true)
Filestack Basic Implementation
This Basic mode introduces Filestack’s picker and transformation UI to the existing Froala users without affecting their existing workflow. Filestack file picker and Transformation UI will add to the existing options for image, video, and file upload and image transformations.
Upload
When the user clicks on Froala’s “Insert Image,” “Insert Video,” “Insert File,” or “File Manager” option from the toolbar, the displayed popup will have an option for upload through Filestack.
Selecting the Filestack option will display the Filestack File Picker tool, allowing users to pick and upload files directly to Filestack and insert them into the Froala editor.
A new API option, filestackOptions.pickerOptions
, has been added allowing you to pass the File Picker configuration such as allowed file types and sources for uploads. You can utilize this option to customize the File Picker experience.
var editor = new FroalaEditor('#editor', { filestackOptions: { /* To get your Filestack API, create a free Filestack account https://www.filestack.com/signup-free-froala/ */ filestackAPI: "**************", uploadToFilestackOnly: false, pickerOptions: { accept: [ ".pdf", "image/jpeg", "image/png", "image/*", "video/*", "audio/*" ], fromSources: [ "local_file_system", "url", "facebook", "instagram" ] }, transformationOptions: { filters: { enabled: [ "blackWhite", "sepia" ] }, adjustments: { enabled: [ "brightness", "noise" ] } } } });
Replace
Froala’s image and video edit popups will feature a new button to replace files via Filestack.
Image Transformations
Filestack offers many image transformations that can be applied through Filestack’s transformation UI.
In this release, a new “Transform“ button was added to Froala’s image edit popup. This option can be used with any image inserted in the editor through Filestack.
Using this option, Froala users will be able to enhance any uploaded image using Filestack’s enhanced Image transformations UI. Users can transform their images by applying filters, adjusting image sizes, and performing many other image transformations. When the Froala user saves their changes, the image is replaced with the transformed version.
Here is a working example of Filestack’s basic mode integration.
Filestack Advanced Implementation
Filestack advanced mode will enforce Filestack options for all file upload features in Froala, replacing the default options on toolbars. Advanced implementation mode can be enabled by setting the configuration filestackOptions.uploadToFilestackOnly
to true
while initializing the editor (by default, this config will be false
).
var editor = new FroalaEditor('#editor', { filestackOptions: { uploadToFilestackOnly: true, filestackAPI: '****', }, });
Upload
Enabling Filestack’s advanced implementation mode will replace the default Insert Image, Video, File, and File Manager buttons on the main toolbar with Filestack upload buttons for images, videos, and files.
Clicking these buttons opens the Filestack picker, enabling users to select and upload files to their Filestack account.
In this mode, dragging and dropping files into the Froala Editor will upload files to Filestack directly and insert them into the Editor as long as the Filestack subscription is active.
Replace
The image edit and video edit popups will still have the same options they have in the basic mode, including the replace option.
Image Transformations
This works the same as the Image Transformation options of Basic Implementation.
Why Filestack
Filestack’s tools and powerful APIs allow users to upload, store, transform, and deliver content easily. Filestack’s Picker integration gives users a rich experience to quickly and seamlessly pick files from different sources. Filestack’s scalable infrastructure powers millions of uploads, transformations, and downloads every month, providing great performance to users worldwide.
Configure Filestack Plugin
To activate the Filestack plugin, consider the following:
- The Filestack File Picker and Transformation UI stylesheet and JavaScript files are included.
<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> <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" />
- The plugin’s JavaScript file is included. If you’re using the packaged version of the Froala editor, you can skip this step.
<link rel="stylesheet" type="text/css" href="dist/css/froala_editor.pkgd.min.css"> <!-- Load main JS file. --> <script type="text/javascript" src="../dist/js/froala_editor.min.js"></script> <!-- Filestack JS file. --> <script type="text/javascript" src="../dist/js/plugins/filestack.min.js"></script>
- Include Froala’s Filestack plugin in the
pluginsEnabled
option if you are customizing this option. - Set the
filestackOptions.filestackAPI
option to your Filestack API. To get your Filestack API, create a free Filestack account. - Set
filestackOptions.uploadToFilestackOnly
totrue
if you want to turn on the advanced mode. - (optional) set
filestackOptions.filestackOptions
option based on your preferences.
var editor = new FroalaEditor('#edit', { imageEditButtons: ['imageReplace', 'imageAlign', 'imageCaption', 'filestackIcon', 'imageTUI'], filestackOptions: { uploadToFilestackOnly: false, filestackAPI: '****', pickerOptions: { accept: [ ".pdf", "image/jpeg", "image/png", "image/webp", "video/*", "audio/*" ], transformations: { "crop": true, } }, }, 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 ",) }, }, });
By configuring the Filestack plugin, you can provide your users with the rich file upload, transformation, and delivery capabilities of Filestack within the Froala Editor. Users can easily access Filestack’s features, such as picking files from various sources, applying image transformations, and replacing existing content. The advanced implementation mode offers a seamless, Filestack-centric experience, streamlining the content creation workflow. Filestack’s scalable infrastructure and powerful APIs ensure reliable performance and a smooth user experience, empowering Froala users to create and manage their content efficiently.
Here is a working example of Filestack’s advanced mode integration.
Is Filestack Free?
Froala users can sign up for a free plan that offers generous usage limits. If you require more usage, Filestack offers various pricing plans, each of which includes a 21-day free trial. Check the available plans on Filestack.
Other Improvements Included in The 4.3 Release
In addition to the Filestack integration, Froala Editor 4.3 includes several other improvements to enhance the user experience. These include:
Counting Special Characters and Emojis Toward the Character Limit
In Froala, developers can limit the number of characters a user can enter in the editor using the charCounterMax
option. Now even special characters and emojis are counted, allowing developers to set more accurate character limits for their content. Now, users will be aware of the true character count, including special characters and emojis, as they type. This helps them stay within the desired character limits.
Fixing Font Family and Font Size Issues When Integrating with Craft CMS
The Craft CMS framework’s CSS conflicted with the Froala editor’s styles, resulting in incorrect font family and font size for the editor content. The Froala team has resolved this issue, ensuring that the conflict no longer occurs.
Bug Fixes
We’ve addressed several user-reported bugs and issues to improve the user experience even better. These include:
- Resolved the issue where an additional scrollbar appears when opening the emoticons popup on certain screen resolutions.
- Resolved the issue occurs when a user tries to select a link using the combination of the left arrow key and the Shift key, resulting in an “Uncaught DOMException” error.
- Resolved the issue where setting fontSizeDefaultSelection in the config results in multiple wrapper divs being added to the content on subsequent edits.
Please find the complete changelog list here.
How Can I Update?
Don’t miss out on the benefits of the latest Froala 4.3 release. Update today and experience the enhanced editing features and improvements.
If you are using a plain JavaScript library or other framework, check the get started page to know how to download the latest Froala Editor release and how to include it in your project based on your preferred method.
If you are using a plain JavaScript library or other framework, follow the table below to learn how to download the latest Froala Editor release and include it in your project based on your preferred method.
Method | How to download | Include in your project | |
CDN | – |
<!-- Include Editor stylesheet--> <link href="https://cdn.jsdelivr.net/npm/[email protected]/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <!-- Include Editor JavaScript file--> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/js/froala_editor.pkgd.min.js"></script> |
|
CDN (Always the latest version) | – |
<!-- Include Editor stylesheet--> <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <!-- Include Editor JavaScript file--> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script> |
|
NPM |
npm install froala-editor |
<!-- Replace the {download-folder-path} in the following example with the path to the folder containing the stylesheet file e.g. ../css/froala_editor.pkgd.min.js --> <link href="{download-folder-path}/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" /> <!-- Replace the {download-folder-path} with the path to the folder containing the JS file e.g. ../js/froala_editor.pkgd.min.js --> <script type="text/javascript" src="{download-folder-path}/froala_editor.pkgd.min.js"></script> |
|
bower |
bower install froala-wysiwyg-editor |
||
NO Package Manager | Download Froala WYSIWYG Editor files using the download form here. | ||
Integrated with a Framework | Select your preferred framework from 17 different popular frameworks. | ||
Other options | Check here for other options to use Froala WYSIWYG Editor in your project. |
For Froala Editor Version 2 Users:
Follow this migration guide for step-by-step instructions on upgrading from version 2.
Try The Latest Froala Editor
Explore a variety of examples that demonstrate the functionality of the Froala HTML Editor.
Support and Feedback
We are dedicated to always offering the best possible experience for all our users. We believe this release, meant to enhance Typescript support, is a stepping stone towards that commitment. We encourage you to try this improved Typescript support and give us your valuable feedback. Your input is crucial for delivering continuous enhancement in meeting your evolving needs. Thank you for being a valuable part of our vibrant and growing community.
We would like to hear what you think of the latest release! Join us on our GitHub Community to chat with our product manager, developers, and other members of the Froala team.
Change Log
- Please visit the release notes for a complete list of changes.
Get Started
- You can download and start using Froala in less than five minutes following our get-started guide.
Technical Questions
- If you have a technical question, you can check whether we have already answered it in our help center. If not, contact our Support team.
No comment yet, add your voice below!