Days
Hours
Minutes
Seconds
x

Froala Editor v4.1.4 is Here LEARN MORE

Skip to content

Free JavaScript Image Uploader Powered by Froala

Enhance your forms with a sleek image uploader.

image

Drag and Drop

Upload your images just by dragging them to the upload area
image

Image Manager Included

Helps your users browse through or delete images they have uploaded.
image

Insert Images From A Link

Upload images from any location on the web

Froala image uploader is the Froala editor when initialized on an image.

Features

Lightweight

Lightweight

Give your users amazing image uploading experience with less than 50KB file.

Ajax ready

Ajax Ready

Upload images without reloading the page.

File Validation

File Validation

Limit your users to a specific file type, size, image dimensions, or write your own custom validator. 

Cloud Uploading

Upload to the Cloud

Send files directly to Amazon’s Storage Service (S3)

Customize

Simple to Style and Customize 

It starts with an image placeholder from your choice and pop up menu can be easily styled using CSS

Responsive design

Responsive design

Use it on any device, the image uploader will automatically adabted to the screen size.

Progress Bar

Progress Bar

Let users know the image uploading progress.

Image Previews

Image Previews & Scaling

Once file is uploaded, the user will be able to preview & resize it.

By Devs, for Devs

Since it's part from Froala Editor, it is developed and maintained by experts.

Code quality and architecture, documentation and guides make the Froala image uploader a pleasure to use for any developer.

Easy server integration

SDK libraries for +5 different server types are ready for download and inclusion in your project. Handling upload, validation, or delete  images will be easier than any time ago. 

Powerful API

Froala Page Builder comes with a powerful JavaScript API that allows you to easily customize and interact with the image uploader.

Modular architecture

Build with a modular, plugin-based architecture allowing you to load only the plugin you're using. also, you can easily extend the Froala image uploder's functionality. 

Get Started

  1. Install Froala WYSIWYG Editor.

  2. Add image element in your HTML file
    <img id="logo" src="https://i.ibb.co/g9gGYPX/avatar-g177d581fb-640.png" 
    alt="User placeholder" height="100" >


  3. Initialize Froala editor on that image
            const editor = new FroalaEditor('#logo')


  4. Set editor options to your desired settings.
            const editor = new FroalaEditor('#logo',{ 
                                pluginsEnabled: ['image''imageManager'],
                               
     imageEditButtons: ['imageReplace''imageRemove'],
                                imageInsertButtons: ['imageBack''|''imageUpload'],
                                imageDefaultWidth: 150,
                                
    imageUploadMethod: 'POST',
                                // Set the image upload URL.
                                
    imageUploadURL:'upload.php',

                                
    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,
            });

  5. Upload images to your server using our ready SDK or upload to the cloud

Try Froala Image uploader

It’s fast, sleek, has a comprehensible API, and comes with an image manager already included. Download Froala WYSIWYG Editor to get started.

Fill out the form to download a free trial of Froala WYSIWYG HTML Editor.

Note: By registering, you confirm that you agree to the processing of your personal data by Froala, Inc. – Froala as described in the Privacy Statement. Froala, Inc. – Froala is part of the Idera group and may share your information with its parent company Idera, Inc., and its affiliates. For further details on how your data is used, stored, and shared, please review our Privacy Statement.

Looking for adding a rich content editing Feature?

You already have it, use the same script to enable rich content editing using Froala WYSIWYG editor and enjoy

fast loading

Faster page loading

Avoid multiple server requests.
Easy maintenance

Easier to maintain product

Don’t worry about conflicts and redundancy, and enjoy API consistency.
image

Looking for adding a rich content editing Feature?

You already have it, use the same script to enable rich content editing using Froala WYSIWYG editor and enjoy

image
fast loading

Faster page loading

Avoid multiple server requests.
Easy maintenance

Easier to maintain product

Don’t worry about conflicts and redundancy, and enjoy API consistency.

Frequently Asked Questions

Froala WYSIWYG editor is not a free product, however, you can use it for free in the following cases
  • If you’re using it locally, not in live product
  • Using it as an image uploader tool as described on this page. (Initialized on an image mode.)

Otherwise, you will need to purchase a license by subscribing to one of these plans.

Froala WYSIWYG Editor is the full editor that appears when Froala initialized on dev or textarea elements, it allows rich edit content functionality with +100 features e.g. adding images, tables, videos and more, see all of them here.
Froala image uploader is when Froala WYSIWYG Editor is initialized on image, in this case it can be used to upload and edit images inside HTML forms.
While Multiple image uploads are supported by Froala WYSIWYG editor through the file manager plugin, Froala image uploader allows only uploading one file by one.
Currently, it is designed to be used for only images, however, its modular architecture allows you to modify it for working for other files.
Three professionals sitting across from each other on a laptop, tablet and mobile phone with open browsers.

Subscribe

Receive email notifications about new features and new releases.

Find us on Facebook and Twitter.

[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1946512965" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1496707205" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_1455060046" class="gglcptch_recaptcha"></div> <noscript> <div style="width: 302px;"> <div style="width: 302px; height: 422px; position: relative;"> <div style="width: 302px; height: 422px; position: absolute;"> <iframe src="https://www.google.com/recaptcha/api/fallback?k=6Ld6lNoUAAAAAM626LfCOrnkBFJtYZAKESFCjgv_" frameborder="0" scrolling="no" style="width: 302px; height:422px; border-style: none;"></iframe> </div> </div> <div style="border-style: none; bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px; background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px; height: 60px; width: 300px;"> <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px !important; height: 40px !important; border: 1px solid #c1c1c1 !important; margin: 10px 25px !important; padding: 0px !important; resize: none !important;"></textarea> </div> </div> </noscript></div>