React Rich-Text Editor with Advanced Images and Cloud Storage
- Posted on
- By Mostafa Yousef
- In Editor, Tutorials
Table of contents
- Step 1: Creating A React App.
- Step 2: Install Froala React Component
- Step 3: Include Froala in Your Application
- Step 4: Include Filestack For Uploading and Storing Files
- Step 5: Filestack Configuration
- 5.1: Create Filestack Account
- 5.2: Set the Filestack Plugin Options
- 5.3: Configure Cloud Storage
- Step 6: Add Froala To Your Main Component
- Step 7: Start Your Application
- Step 8: Test Your Application
- Conclusion

Rich-text editor is a crucial component that allows your users to seamlessly add and edit content. But have you ever found the process of integrating image uploads and storage to be a complex and time-consuming task?
Rich-text editors are undoubtedly popular, but the ability to easily insert and display images is often a pain point. Traditionally, developers have had to write additional code to handle the uploading and storage of images, a process that can be both tedious and error-prone.
However, thanks to the integration between Froala and Filestack, introduced in Froala version 4.3, the uploading and storing of any type of files has become a straightforward process. In this article, we’ll guide you through the setup of this powerful integration within your React applications, empowering you to create a React rich-text editor with advanced image editing capabilities and a seamless cloud storage solution.
Get ready to streamline your content management workflow and provide your users with a truly exceptional experience. Let’s dive in and explore how you can leverage this powerful combination to take your web applications to new heights.
Step 1: Creating A React App.
Skip this step if you will install the editor in an existing React app.
Run the following commands to create a new React application
npm install -g create-react-app npx create-react-app froala-app cd froala-app
The above code creates a new React application named “froala-app” and navigates to the project directory. This sets up the necessary files and folders for a basic React application, which you can then customize to integrate the Froala Rich Text Editor and Filestack for file management.
Step 2: Install Froala React Component
Next, you’ll need to install the Froala Rich Text Editor SDK for React. Run the following commands in your project directory:
npm install react-froala-wysiwyg --save
This will add the required dependencies to your project, allowing you to use the Froala editor within your React application.
Step 3: Include Froala in Your Application
To create a Froala editor component with your custom configuration, create a new file “src/components/FroalaComponent.jsx” and add the following code
import React from 'react'; // Require Editor CSS files. import 'froala-editor/css/froala_style.min.css'; import 'froala-editor/css/froala_editor.pkgd.min.css'; import FroalaEditorComponent from 'react-froala-wysiwyg'; import 'froala-editor/js/plugins.pkgd.min.js'; // Render Froala Editor component. function FroalaComponent (){ return ( <div class="editor"> <h3> Froala's React WYSIWYG Editor</h3> <FroalaEditorComponent tag='textarea'/> </div> ); } export default FroalaComponent;
In the above code, we did the following
- Import the necessary Froala CSS files and the
FroalaEditorComponent
from the “react-froala-wysiwyg” library. - Import the
/plugins.pkgd.min.js
to load the full-featured editor with all default plugins loaded. - Create a functional component called
FroalaComponent
that renders the Froala editor within a div. - Set the
tag
attribute ofFroalaEditorComponent
totextarea
, this means the editor will be initialized at textarea HTML element. - (Optional) Set the
config
attribute ofFroalaEditorComponent
and pass your custom Froala options values through it. We will use it later to set up Filestack plugin options and events.
Step 4: Include Filestack For Uploading and Storing Files
To correctly display the Filestack File Picker and UI Transformation tools in the editor, include the following Filestack files:
- Filestack’s File Picker script: https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js
- Filestack script for drag and drop files: https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js
- Filestack UI Transformation tool for image editing:
We can directly add the script and link tags to your React project’s “public/index.html” file. This method ensures that the scripts are loaded with the initial HTML file.
However, for better performance, we will use the useEffect
hook to dynamically add the scripts and stylesheet to the document when the component mounts and remove them when the component unmounts. This ensures the external resources are properly loaded and unloaded with the component lifecycle.
Here’s the “FroalaComponent.jsx” after including the Filestack scripts and stylesheet:
import React, { useEffect } from 'react'; import 'froala-editor/css/froala_style.min.css'; import 'froala-editor/css/froala_editor.pkgd.min.css'; import FroalaEditorComponent from 'react-froala-wysiwyg'; import 'froala-editor/js/plugins.pkgd.min.js'; function FroalaComponent() { useEffect(() => { const filestackScript1 = document.createElement('script'); filestackScript1.src = 'https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js'; filestackScript1.async = true; document.body.appendChild(filestackScript1); const filestackScript2 = document.createElement('script'); filestackScript2.src = 'https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js'; filestackScript2.async = true; document.body.appendChild(filestackScript2); const filestackScript3 = document.createElement('script'); filestackScript3.src = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js'; filestackScript3.async = true; document.body.appendChild(filestackScript3); const filestackStylesheet = document.createElement('link'); filestackStylesheet.rel = 'stylesheet'; filestackStylesheet.href = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css'; document.head.appendChild(filestackStylesheet); return () => { document.body.removeChild(filestackScript1); document.body.removeChild(filestackScript2); document.body.removeChild(filestackScript3); document.head.removeChild(filestackStylesheet); }; }, []); return ( <div className="editor"> <h3>Froala's React WYSIWYG Editor</h3> <FroalaEditorComponent tag='textarea' /> </div> ); } export default FroalaComponent;
Step 5: Filestack Configuration
5.1: Create Filestack Account
In this step, we need to create a Filestack account and obtain a Filestack API key to add to the Froala configuration so we can upload files to your cloud storage through the Filestack File Picker. This powerful tool allows users to upload, store, and transform files directly. When integrated with Froala, it enables users to upload files from their local devices or cloud storage and apply various transformations within the Froala Editor interface.
You can create a free Filestack account with limited bandwidth, uploads, transformations, and storage, or start a free trial of a paid plan based on your needs.
5.2: Set the Filestack Plugin Options
Login to your account and copy your Filestack API key.
In the “FroalaComponent.jsx”, add a config parameter to FroalaEditorComponent
where you can pass all the Froala configuration:
- Set the
filestackOptions.filestackAPI
to your Filestack API key. - Set the
filestackOptions.uploadToFilestackOnly
totrue
. This will handle all file uploads by Filestack. - (Optional) If you want to customize the Filestack Picker, pass the File Picker configurations in the
filestackOptions.pickerOptions
option. - (Optional) Assign a callback function to the
filestack.filestackPickerOpened
event to perform a custom action after a user opens the Filestack File Picker. - (Optional) Assign a callback function to the
filestack.filestackPickerClosed
event to perform a custom action after a user closes the Filestack File Picker. - (Optional) Assign a callback function to the
filestack.uploadedToFilestack
event to perform a custom action when files are successfully uploaded to your cloud storage. - (Optional) Assign a callback function to the
filestack.uploadFailedToFilestack
event to perform a custom action if file upload fails.
import React, { useEffect } from 'react'; import 'froala-editor/css/froala_style.min.css'; import 'froala-editor/css/froala_editor.pkgd.min.css'; import FroalaEditorComponent from 'react-froala-wysiwyg'; import 'froala-editor/js/plugins.pkgd.min.js'; function FroalaComponent() { let config = { filestackOptions: { uploadToFilestackOnly: true, filestackAPI: "***", }, 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 ",) }, }, }; useEffect(() => { const filestackScript1 = document.createElement('script'); filestackScript1.src = 'https://static.filestackapi.com/filestack-js/3.32.0/filestack.min.js'; filestackScript1.async = true; document.body.appendChild(filestackScript1); const filestackScript2 = document.createElement('script'); filestackScript2.src = 'https://static.filestackapi.com/filestack-drag-and-drop-js/1.1.1/filestack-drag-and-drop.min.js'; filestackScript2.async = true; document.body.appendChild(filestackScript2); const filestackScript3 = document.createElement('script'); filestackScript3.src = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.umd.min.js'; filestackScript3.async = true; document.body.appendChild(filestackScript3); const filestackStylesheet = document.createElement('link'); filestackStylesheet.rel = 'stylesheet'; filestackStylesheet.href = 'https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css'; document.head.appendChild(filestackStylesheet); return () => { document.body.removeChild(filestackScript1); document.body.removeChild(filestackScript2); document.body.removeChild(filestackScript3); document.head.removeChild(filestackStylesheet); }; }, []); return ( <div className="editor"> <h3>Froala's React WYSIWYG Editor</h3> <FroalaEditorComponent tag='textarea' config={config} /> </div> ); } export default FroalaComponent;
The “FroalaComponent.jsx” component can now be imported and used in other components of your React application.
5.3: Configure Cloud Storage
By default, all uploaded files are stored in Filestack’s internal S3 bucket. This doesn’t require any additional configuration and works for both free and paid Filestack accounts.
However, if you’re on a paid plan, you can store files in your custom cloud storage on the following platforms:
- Amazon S3
- Rackspace
- Azure Blob Storage
- Dropbox
- Google Cloud Storage
Log in to your Filestack dev portal and follow the steps described here.
Step 6: Add Froala To Your Main Component
To display the Froala editor in your product, add the FroalaComponent to the template where you want the editor to be displayed.
In our tutorial, we will add it to the App.js file. It will be like
import './App.css'; import FroalaComponent from './components/FroalaComponent'; function App() { return ( <div className="App"> <FroalaComponent /> </div> ); } export default App;
Step 7: Start Your Application
Open the terminal again and run the following command.
npm start
This will start the development server, which will display the Froala editor with Filestack buttons for uploading images, videos, and files.
Step 8: Test Your Application
You can test if your Filestack integration is working properly by following the below steps:
- Upload images, videos, or files through Filestack File Picker.
- Login to your Filestack dev portal.
- Click on the “Content Browser“ and see if your files are listed.
- Go to your cloud storage service and check if your file is successfully stored.
Conclusion
In this article, we’ve explored how to seamlessly integrate the Froala React Rich Text Editor with Filestack’s powerful file management capabilities within a React application. Filestack provides a user-friendly interface and a range of advanced image editing capabilities that can be easily integrated with the Froala editor.
The integration of Froala and Filestack streamlines the process of uploading, storing, and transforming files directly within the rich-text editor, empowering your users to focus on creating great content without the hassle of complex file management. With just a few simple steps, you can set up this integration and unlock advanced image editing tools, a user-friendly file picker, and a robust cloud storage solution.
So what are you waiting for? Try the Froala-Filestack integration and give your users the rich-text editing experience they deserve.
Get your Filestack API here for free.
No comment yet, add your voice below!