Froala 4.3: Advanced Image & Video Upload and Transformation Features

Advanced Image uploads

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.

Froala V4.3

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.

  1. Basic Implementation mode (Default Mode)
  2. 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.

Basic image upload mode

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.

Filestack replace image

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.

Filestack transformation UI

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.

Fraola advanced file upload mode

Clicking these buttons opens the Filestack picker, enabling users to select and upload files to their Filestack account.

File Picker

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 to true 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

Get Started

  • You can download and start using Froala in less than five minutes following our get-started guide.

Technical Questions

Get your Filestack API here for free.

Posted on October 3, 2024

Mostafa Yousef

Senior web developer with a profound knowledge of the Javascript and PHP ecosystem. Familiar with several JS tools, frameworks, and libraries. Experienced in developing interactive websites and applications.

No comment yet, add your voice below!


Add a Comment

Your email address will not be published. Required fields are marked *