Days
Hours
Minutes
Seconds
x

Froala Editor v4.2.0 is Here LEARN MORE

Skip to content

Java Image Validation

How it works

  1. The image gets uploaded to your server.
  2. Before storing the image on disk, it is being validated on server side.

Jump to Complete Example

Image Upload

In the Server Upload article we explain the steps to upload an image on your server. When you insert an image in the rich text editor, you can validate its format. However that check is done only on the filename and not on the mime type. We recommend to make additional checks on server side just to make sure that users don't upload images in bad formats.

Validate Extension

The WYSIWYG editor's Java SDK comes with the possibility to check the image extension when it is being stored on the disk. Additional to the file name extension, it is using the mime type of the file for better accuracy.

ImageOptions options = new ImageOptions();
options.setFieldname("myImage");
options.setValidation(new ImageValidation(new String[] { "gif", "jpeg", "jpg", "png", "svg", "blob" }, new String[] { "image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml" }));

Map<Object, Object> responseData = Image.upload(request, fileRoute, options);

Custom Validation

You can also pass a custom method instead of validating the extension and mime type. This gives you full control on what types of images you want to store on disk. Below is an example of how to validate if an image is square.

ImageOptions options = new ImageOptions();
options.setFieldname("myImage");
options.setValidation(new ImageValidation(new CustomValidation() {

    @Override
    public boolean validate(String filePath, String mimeType) {

        BufferedImage image;
        try {
            image = ImageIO.read(new java.io.File(filePath));
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }

        if (image == null) {
            return false;
        }

        int width = image.getWidth();
        int height = image.getHeight();

        if (width != height) {
            return false;
        }

        return true;
    }
}));

Map<Object, Object> responseData = Image.upload(request, fileRoute, options);

Complete Example

<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageUploadURL: '/upload_image_validation'
    })
  });
</script>
package com.froala.examples.servlets;

import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.froala.editor.CustomValidation;
import com.froala.editor.Image;
import com.froala.editor.image.ImageOptions;
import com.froala.editor.image.ImageValidation;
import com.google.gson.Gson;

/**
 * Servlet implementation class UploadImageValidation
 */
@WebServlet("/upload_image_validation")
@MultipartConfig
public class UploadImageValidation extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public UploadImageValidation() {
        super();
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
     *      response)
     */
    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String fileRoute = "/public/";

        ImageOptions options = new ImageOptions();
        options.setFieldname("myImage");
        options.setValidation(new ImageValidation(new CustomValidation() {

            @Override
            public boolean validate(String filePath, String mimeType) {

                BufferedImage image;
                try {
                    image = ImageIO.read(new java.io.File(filePath));
                } catch (IOException e) {
                    e.printStackTrace();
                    return false;
                }

                if (image == null) {
                    return false;
                }

                int width = image.getWidth();
                int height = image.getHeight();

                if (width != height) {
                    return false;
                }

                return true;
            }
        }));

        Map<Object, Object> responseData;
        try {
            responseData = Image.upload(request, fileRoute, options);
        } catch (Exception e) {
            e.printStackTrace();
            responseData = new HashMap<Object, Object>();
            responseData.put("error", e.toString());
        }
        String jsonResponseData = new Gson().toJson(responseData);
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().write(jsonResponseData);
    }

}
[class^="wpforms-"]
[class^="wpforms-"]
[bws_google_captcha]
<div class="gglcptch gglcptch_v2"><div id="gglcptch_recaptcha_956291690" 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_1603019659" 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_21760316" 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>