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/[email protected]/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/[email protected]/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/[email protected]/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/[email protected]/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,
                } 
            },

        });

Try Froala Free