- Back to Docs
- Install and Configure
- Image
- Server Upload
- Server Delete
- S3 Upload
- Resize
- Validation
- Image Manager
- Simple Server
- File
- Server Upload
- Server Delete
- S3 Upload
- Validation
- References
- Image
- File
- S3
Java Image Server Delete
How it works
- Your code intercepts the image being removed from the javascript editor.
- When an image is removed, a request is made to the server telling it to delete the image from disk.
- Once the request hits the server, it deletes the image.
Intercept image being removed
When an image is being removed from the javascript editor, it triggers two events: froalaEditor.image.beforeRemove
and froalaEditor.image.removed
. You could use either of them to delete the image from server, however we recommend the second one because at that point you're sure that the image was removed from the editable area.
Send request to the server
There is no built-in feature that makes the request to the server, however it can easily be done using an AJAX request.
<script> $(function() { // Catch the image being removed. $('.selector').on('froalaEditor.image.removed', function (e, editor, $img) { $.ajax({ // Request method. method: 'POST', // Request URL. url: '/delete_image', // Request params. data: { src: $img.attr('src') } }) .done (function (data) { console.log ('Image was deleted'); }) .fail (function (err) { console.log ('Image delete problem: ' + JSON.stringify(err)); }) }); }); </script>
Delete the image
The server implementation is responsible for receiving the request and handling it appropriately. Using the code from the previous step, makes the image path available in the javax.servlet.http.HttpServletRequest
parameter. The com.froala.editor.Image.delete
method from the Java SDK is expecting the path of the image to remove from disk.
Note: The path of the image is relative to the root of the project.
String src = request.getParameter("src"); Image.Delete(request, src);
Complete Example
<script> $(function() { // Catch the image being removed. $('.selector').on('froalaEditor.image.removed', function (e, editor, $img) { $.ajax({ // Request method. method: 'POST', // Request URL. url: '/delete_image', // Request params. data: { src: $img.attr('src') } }) .done (function (data) { console.log ('Image was deleted'); }) .fail (function (err) { console.log ('Image delete problem: ' + JSON.stringify(err)); }) }); }); </script>
package com.froala.examples.servlets; import java.io.IOException; import javax.servlet.ServletException; 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 DeleteImage */ @WebServlet("/delete_image") public class DeleteImage extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public DeleteImage() { super(); } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse * response) */ @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String src = request.getParameter("src"); try { Image.delete(request, src); } catch (Exception e) { e.printStackTrace(); response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR); return; } String jsonResponseData = new Gson().toJson("Success"); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(jsonResponseData); } }