Days
Hours
Minutes
Seconds
x

New Froala Editor v5.0.0 is here โ€“ Learn More

Skip to content
Froala Documentation

Java File Server Upload

How it works

  1. Specify upload options when initializing the editor.
  2. On file insertion, the editor automatically makes an AJAX request to the server.
  3. Once the request reaches the server, it stores the file and sends back to the client the link to the uploaded file.

Jump to Complete Example

Initialize the javascript editor

First, set the fileUploadURL option and specify the URL destination for the uploaded files.

Next, set any additional options to configure upload methods and allowed file types: fileUploadParam, fileUploadParams, fileUploadMethod, fileMaxSize, fileAllowedTypes.

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/upload_file'
  })
</script>

Receive the uploaded file and store it

The server implementation is responsible for receiving the request and handling it appropriately. In Java, the uploaded file is available in the javax.servlet.http.HttpServletRequest parameter. The Java editor SDK detects the uploaded file automatically but you have to specify the path where to store it.

Note: The path of the file is relative to the root of the project.

String fileRoute = "/public/";
Map<Object, Object> responseData = File.upload(request, fileRoute);

To store the uploaded file, the server needs write rights on the uploads folder. Additionally, check uploaded files are publicly accessible in the browser.

Return the path to the uploaded file

If the save action is successful, the SDK generates a FileResponse object with the absolute path to the uploaded file, and the server returns the path to the client side.

String jsonResponseData = new Gson().toJson(responseData);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(jsonResponseData);

Complete Example

<script>
  new FroalaEditor('.selector', {
    // Set the file upload URL.
    fileUploadURL: '/upload_file'
  })
</script>
package com.froala.examples.servlets;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

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.File;
import com.froala.editor.file.FileOptions;
import com.google.gson.Gson;

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

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

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

        String fileRoute = "/public/";

        // No validation.
        FileOptions options = new FileOptions();
        options.setValidation(null);

        Map<Object, Object> responseData;
        try {
            responseData = File.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);
    }
}

Do you think we can improve this article? Let us know.

Sign up

Download the code by signing up for our newsletter

Sign up

Download the code by signing up for our newsletter

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.