- Getting Started
- Browser Support
- Languages Support
- Shortcuts
- Activation
- Examples
- Customize the Editor
- Use-cases
- Plugins
- APIs
- Development Frameworks
- Server Integrations
- Server SDKs
- Migration Guides
- Changelog
- Tutorials
Java Image Server Upload
How it works
- Specify upload options when initializing the editor
- On image insertion, the editor automatically makes an AJAX request to the server.
- Once the request reaches the server, it stores the image and sends back to the client the link to the uploaded image.
Initialize the editor
First, add the imageUploadURL
option, as its value enter the upload destination for the images.
Next, set any additional options to configure upload methods and allowed file types: imageUploadParam
, imageUploadParams
, imageUploadMethod
, imageMaxSize
, imageAllowedTypes
.
<script>
new FroalaEditor('.selector', {
// Set the image upload URL.
imageUploadURL: '/upload_image'
})
</script>
Receive the uploaded image and store it
The server implementation is responsible for receiving the request and handling it appropriately. In Java, the uploaded image is available in the javax.servlet.http.HttpServletRequest
parameter. The Java SDK detects the uploaded image automatically but you have to specify the path where to store it.
Note: The path of the image is relative to the root of the project.
String fileRoute = "/public/";
Map<Object, Object> responseData = Image.upload(request, fileRoute);
To store the uploaded image, the server needs write rights on the uploads folder. Additionally, check uploaded images are publicly accessible in the browser.
Return the path to the uploaded image
If the save action is successful, the SDK generates an ImageResponse
object with the absolute path to the uploaded image 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 image upload URL.
imageUploadURL: '/upload_image'
})
</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.Image;
import com.google.gson.Gson;
/**
* Servlet implementation class UploadImage
*/
@WebServlet("/upload_image")
@MultipartConfig
public class UploadImage extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UploadImage() {
super();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String fileRoute = "/public/";
Map<Object, Object> responseData;
try {
responseData = Image.upload(request, fileRoute); // Use default
// image
// validation.
} 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.