Skip to content

Step 1: Download Froala editor

Use this form to download Froala WYSIWYG editor. It's the core Javascript tool that we will use to implement the image uploader.

Step 2: Include Files Within Your HTML Page

At this point you Froala gives you two options.

Option 1:

Include the packaged (.pkgd) style and script files, which includes all Froala editor functions and plugins in one file.

<link rel="stylesheet" href="../froala_editor.pkgd.min.css">
<script src="../froala_editor.pkgd.min.js"></script>

Note: change the files path to the location you used to download/put these files at

Option 2 (recommended):

Thanks to the modular Froala architecture, we can just include the basic editor script and style files, after that, we include the plugins that we will be using in this case use only which is:

  • Image plugin
  • Image Manager plugin
  • <!-- Stylesheets-->
    <link rel="stylesheet" href="css/froala_editor.min.css">
    <link rel="stylesheet" href="css/plugins/image.min.css">
    <link rel="stylesheet" href="css/plugins/image_manager.min.css">
    <!--JS Scripts-->
    <script src="js/plugins/froala_editor.min.js"></script>
    <script src="js/plugins/image.min.js"></script>
    <script src="js/plugins/image_manager.min.js"></script>

    Note: change the files path to the location you used to download these files at.

Step 3: HTML code

To use Froala as image uploader, we need to initialize the editor on an image, in this step we will add an image as placeholder, you can choose any image that indicates your use case, e.g. if you are using this to upload a profile picture, you can user a user avatar as the placeholder

<img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User image" height="100">

It's recommended to add a caption under that image to tell your users how to begin the uploading process

<div class="form-group">
<label for=" "> </label>
<figure>
<img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" alt="User placeholder" height="100">
<figcaption> Click on the above image to edit or replace</figcaption>
</figure>
</div>

Step 4: Initialize the editor and set options

Now we are ready to initialize our sleek Froala image editor, all you have to do is invoke the initialization function and pass the required parameters.
It's recommend to go through all options, events and methods from the Froala editor API page.
For image plugin API refer to the Image plugin page.
For image manager plugin API refer to the Image manager plugin page.
Here an example with some of the most recommended options

            <script>
                    const editor = new FroalaEditor('#logo',{
                            pluginsEnabled: ['image', 'imageManager'],
                            //image popup buttons
                            imageEditButtons: ['imageReplace', 'imageRemove'],
                            //Buttons for the popup menu which appears on imageReplace button click
                            imageInsertButtons: ['imageBack', '|', 'imageUpload', 'imageByURL', 'imageManager'],
                            imageDefaultWidth: 150,
                            imageUploadMethod: 'POST',
                            // Set the image upload URL.
                            imageUploadURL:'upload.php',
                            // Set the image upload URL.
                            imageManagerLoadURL: 'image_manager/load_images.php',
                            // Set the image delete URL.
                            imageManagerDeleteURL: 'delete_image.php',
                            //Validation
                            imageAllowedTypes: ['jpeg', 'jpg', 'png'],
                            // Set max image size to 10MB.
                            imageMaxSize: 1024 * 1024 * 10,
                            // For insert image from a link
                           imageCORSProxy: 'https://cors-anywhere.herokuapp.com',
                            events: {
                                'image.replaced': function ($img, response) {
                                    // Image was replaced in the editor.
                                alert('Image has been replaced successfully.');
                                },
                                'image.error': function (error, response) {
                                    // Image was uploaded to the server.
                                alert('Image uploading failed.');
                                        },
                                 //delete image from the server
                                'image.beforeRemove': function ($img) {
                                //Send Http request to delete the image
                                },
                                'imageManager.imageDeleted': function (data) {
                                // Do something here.
                                // this is the editor instance.
                                console.log(this);
                                }
                                     }
                                     });
                </script>

Step 5: Download the Froala SDK (optional - to handle server-side operations)

Download one of these SDK libraries,
it will help you to implement the server-side image processing operations handy in a few minutes instead of building it from scratch.

Alternatively, you can read this image concepts guide to create your custom implementation.

Step 6: Read a full example

If you still need more information, we recommended reading this full example of how to upload/delete images on a PHP server. If you are using another server type, you can still consider reading this PHP example too. That is because all of our SDK is built using a similar architecture. It uses the same class names as well.

If you still need help, please contact us.