Integrating a WYSIWYG Editor with a Reliable and Lightning Fast File Uploading System

With more than a billion files uploaded to the web daily, it’s important to include a reliable, fast, secure, and intelligent file upload system in your application.

Imagine you are using a WYSIWYG editor to create a web page or an email, and you are about to finish what you are doing. You just need to upload one last image or attach an important file. You click on the insert file button, select your file, and click on the upload button. Suddenly, the uploading process is stopped, and the upload fails.  We have all gone through this several times, and we know just how annoying it is. Today, we will learn about the reliable Filestack file uploading service and how to integrate it with the Froala editor. This will not just add more reliability to your editor but also a complete and powerful upload service to your editor. It will led to a seamless uploading experience that your users will enjoy.

Why Filestack?

The default uploading system included in most WYSIWYG editors handles uploading files using basic methods to just display the file inside the editor. In this setup, it’s your task to handle saving the file onto your server. Most of these systems aren’t reliable enough to be used in poor network conditions or in bad quality of service conditions.

The top WYSIWYG editor on the G2 for more than two years, Froala WYSIWYG editor, has one of the best file managers and uploading features. Moreover, it comes with free SDK libraries that support many server-side languages. These SDKs help you handle saving and deleting files to and from your server quickly and easily. Nevertheless, by integrating Filestack with Froala, you will get an even more powerful file uploading service.

Filestack Intelligent Ingestion

Filestack introduces the Intelligent Ingestion (FII) feature. It intelligently detects network conditions, device type, and browser then makes automated decisions on how best to chunk a file to ensure it uploads successfully. Tests show that Filestack is more reliable than other uploading services like Google Drive, Plupload, and jQuery File Uploader.

Filestack Content Ingestion

Filestack guarantees up to 10x faster uploads. Unlike the other uploading services, Filestack’s Content Ingestion Network (CIN) uploads your file in two stages:

1. The file is stored in the nearest Filestack Ingestion point-of-presence (POP), and a file URL (filelink) is generated almost immediately for your use.
2. While you access the file, it is uploaded asynchronously to its final destination. A webhook is sent to you, notifying you that the file is stored properly, and your filelink automatically adjusts to point to the permanent cloud storage location.

This means that you do not have to wait until the file is stored in its final destination before using it in your application.

Filestack Integrated Storage Sources

It is worth mentioning that Filestack allows you to upload files from over 20 sources without any additional lines of code. When it comes to storing your files on the Filestack cloud storage service, it is super easy. All you need to do is set the storeTo parameter of the picker options.

//Code Example
const client = filestack.init(YOUR_API_KEY);

const options = {
   storeTo: {
     location: 'azure',
     path: '/site_uploads/'
   }
};

//Open file picker
client.picker(options).open();

Filestack Processing Engine

With the Filestack processing engine, you can transform various types of files, including images, documents, and videos. For instance, users will be able to apply filters, adjust image sizes, and perform many other image transformations, providing them with a rich in-app image editing experience.

Filestack Intelligence

And we can’t ignore the intelligence you will add to your application when you integrate it with Filestack. With features like:

• Copyright Detection
• Phishing Detection
• Image Safe for Work Detection (SFW)
• Video SFW
• Virus Detection

You can detect any suspicious or illegal content and block it before it is stored on your server.

If your business requires adding tags to uploaded images or videos, integrating Filestack into your application is your best bet.   Its “Image Tagging” and “Video Tagging” features accurately detect related tags in your image or video. You can then use the generated tags to automatically group and classify your files.

Filestack Workflows

With Filestack, you can set up your desired logic through a simple user interface and then apply it to the uploaded files by setting the workflow API option. You don’t have to be a programmer to use it.

const client = filestack.init(YOUR_API_KEY);

//set your workflow
const options = {
   workflows: [YOUR_WORKFLOW_ID]
};

//open the file picker
picker = client.picker(options).open();

And Much More..

Filestack has hundreds of features that you will definitely find useful in your application. We can’t cover all of them in a single blog post, so take some time to view all of Filestack’s features here.

How do I integrate Filestack with Froala?

The modular architecture of the Froala editor makes it easy to extend its functionality through plugins. Follow the steps below to create a custom plugin that uses Filestack’s file picker to insert images into the Froala WYSIWYG editor:

• Use the custom plugin guide to create a new Froala plugin called “filestack”
• Add plugin options to allow users to enter their Filestack API and their desired Filestack options.

// Add options for your plugin.
FroalaEditor.DEFAULTS = Object.assign(FroalaEditor.DEFAULTS, {

    //Allow users to set their Filestack options 
    filestackOptions: {

       displayMode: 'overlay',

       uploadInBackground: false,

       //accept images only since we are using Filestack for inserting images to the editor.
       accept: ["image/*"],
    },

    //Allow users to enter their Filestack API
    filestackAPI: '',
});

• Inside the plugin initialization method, verify that the user entered the Filestack API correctly

//Verify that the user entered the Filestack API credentials
if(editor.opts.filestackAPI === 0){
  alert("The Filestack plugin is not active! You should set the filestackAPI option correctly.");
  return false;
}

• We need to create a button that will open the Filestack file picker. Create a custom button following this guide.

/*First, create icon for the button. The icon will be the Filestack logo */
FroalaEditor.DefineIcon('filestackIcon', {SRC: 'https://i.ibb.co/YX5xjzw/Filestack-logo.png', ALT: 'Open Filestack file picker', template: 'image'});

/*Create a button with the name 'openFilePicker' */
FroalaEditor.RegisterCommand('openFilePicker', {

    type: 'button',
    icon: 'filestackIcon',
    title: 'Open Filestack File Picker',
        
    //Set a function to be called when the button clicked
    callback: function callback() {
    
    /* This button will be used to insert new images or to replace an existing image
    ** in case of doing a replace action, save the selected image so we can replace it later.
    */ 
    var selectedImage = this.image.get();

    //Init Filestack
    var client = filestack.init(this.opts.filestackAPI);

    /*
    ** Extend the filestack options to trigger the filestack plugin onUploadDone callback once the image is uploaded 
    ** We will define the onUploadDone method on the custom filestack plugin in the next step.
    */
    Object.assign(this.opts.filestackOptions, {
        //Set displayMode to 'overlay' to open the file picker with the minimum setup. Other modes require more steps to get the file picker visible when the openFilePicker button is clicked.
        displayMode: 'overlay',
        onUploadDone: (res) => {
          //Save the caret position, to be able to insert images in the caret position
          this.selection.save();
 
          //Trigger the filestack plugin onUploadDone function
          this.filestack.onUploadDone(res, selectedImage);
        },
    });

    // Open file picker
    client.picker(this.opts.filestackOptions).open();

   }

   plugin: 'filestack'
});

• On the Filestack plugin, add the onUploadDone method to be executed when the image is uploaded successfully through Filestack

function onUploadDone(res, selectedImage){

    //If an image was selected beforehand, remove it first.
    if( typeof selectedImage !== "undefined" ){
        editor.image.remove(selectedImage);
    }

    //Insert the new images into the editor
    if( typeof res.filesUploaded !== "undefined" ){
      for (const file of res.filesUploaded) {
           //Restore the caret position
           editor.selection.restore();

           //Insert the uploaded image in the editor
           editor.image.insert(file.url, false);
       }
    }
}

• Don’t forget to make the onUploadDone method publicly accessible

  return {
            _init: _init,
            onUploadDone: onUploadDone,
        }

• In the HTML page:
  • Include Froala stylesheet and script

• • Include Filestack script

• • Include the new Froala filestack plugin script

<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Froala-Filestack integration demo</title>

    <!-- Froala Editor Stylesheet-->
    <link href='https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css' rel='stylesheet' type='text/css' />
</head>

<body>

    <!--Editor element-->
    <div id="editor"></div>

    <!-- Froala Editor JS-->
    <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js'></script>

    <!-- Filestack JS-->
    <script src="http://static.filestackapi.com/filestack-js/3.x.x/filestack.min.js" crossorigin="anonymous"></script>

    <!-- Froala filestack plugin JS-->
    <script type='text/javascript' src='froala-filestack-plugin.js'></script>

</body>

• Finally, initialize Froala editor considering the following:
  • Include Froala’s Filestack plugin in the pluginsEnabled option

• • Include the new openFilePicker button in the toolbarButtons option and the imageEditButtons option

• • Set filestackAPI option to your Filestack API. To get your Filestack API, create a free Filestack account.

• • (optional) Set filestackOptions option based on your preferences

<script>

  // init Froala Editor
  new FroalaEditor('#editor',{

            //Add openfilepicker button to the edit image popup buttons
            imageEditButtons: ['openFilePicker', 'imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|', 'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'],

            //Add openfilepicker button to the toolbar buttons
            toolbarButtons: {

               'moreText': {
                  'buttons': ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'inlineClass', 'inlineStyle', 'clearFormatting']
                },
                'moreParagraph': {
                  'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
                },
                'moreRich': {
                   'buttons': ['openFilePicker', 'insertLink', 'insertImage', 'insertVideo', 'insertTable', 'emoticons', 'fontAwesome', 'specialCharacters', 'embedly', 'insertFile', 'insertHR']
                },
                'moreMisc': {
                   'buttons': ['undo', 'redo', 'fullscreen', 'print', 'getPDF', 'spellChecker', 'selectAll', 'html', 'help'],
                   'align': 'right',
                   'buttonsVisible': 2
                }
            },

            //Add filestack plugins to the enabled plugins array
            pluginsEnabled: ['filestack', 'image', 'link'],

            /*
            ** To get your Filestack API, create a free Filestack account 
            ** https://dev.filestack.com/signup/free/
            */
            filestackAPI: "**************",
   });

</script>

Now, you will be able to upload images through Filestack and insert them in the Froala editor.

 
Automatically add captions to your images

You can use Filestacks’ artificial intelligence to automate many helpful tasks before inserting the images into the WYSIWYG editor. For example, in the following demo, we use Filestack to detect a related caption for the uploaded image and then insert the detected caption below the image automatically.

By Integrating Filestack with Froala, you will add a powerful uploading system to your WYSIWYG editor. It will make your editor even more robust with features ranging from advanced image processing to artificial intelligence-based processing. We assure you that with this integration, you can attend to every possible in-editor uploading need of your users. Besides, it’s free. So why not try it now?


Download the Froala Filestack demos source code