Image Upload (original) (raw)

The following sections describe how to handle image uploads on your server using Java as a server-side language. For information on the upload workflow refer to the image upload documentation.

Dependencies

The java image upload example requires the following dependencies:

Frontend

This is the HTML that you need to include in the WebContent folder:

On the head section include the Editor style.

On the body section include the Editor JS files and define the area for the editor.

image upload example.

Initialize the editor and set the image upload URL

The full code should look like this:

<div class="sample">
  <h2>image upload example.</h2>
  <form>
    <textarea id="edit" name="content"></textarea>
  </form>
</div>

<script>
  new FroalaEditor('#edit', {
    imageUploadURL: '/UploadFiles',
    imageUploadParams: {
      id: 'my_editor'
    }
  })
</script>

The full code should look like this:

<div class="sample">
  <h2>Image upload example.</h2>
  <form>
    <textarea id="edit" name="content"></textarea>
  </form>
</div>

<script>
  new FroalaEditor('#edit', {
    imageUploadURL: '/UploadFiles',
    imageUploadURL: {
      id: 'my_editor'
    }
  })
</script>

Backend

ImageUpload.java servlet handles the upload part. The servlet has basic image format validations that can be easily extended.

The uploads directory must be set to a valid location before making uploads. The path can be any folder that is accessible and writable.

If the uploaded image passes the validation step, the server responds with a JSON object containing a link to the uploaded file.

e.g.: {"link":"http://server_address/**upload**/name_of_file"}. FileServlet.java manages the GET request to the "/**files**/" folder.

package com.froala.examples.servlets;

import java.io.File; import java.io.IOException; import java.io.InputStream; import java.io.PrintWriter; import java.nio.file.Files; import java.util.HashMap; import java.util.Map; import java.util.UUID;

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 javax.servlet.http.Part;

import org.apache.commons.io.FilenameUtils; import org.apache.commons.lang.ArrayUtils;

import com.google.gson.Gson;

/**

Servlet implementation class UploadImage */ @WebServlet(name = "ImageUploadServlet", urlPatterns = { "/upload_image" }) @MultipartConfig public class ImageUpload extends HttpServlet { private static final long serialVersionUID = 1L;

/**
- @see HttpServlet#HttpServlet() */ public ImageUpload() { super(); }
/**
- @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { File uploads = new File("/PATH TO/YOUR PROJECT/WORKSPACE/WEBCONTENT/WEB-INF/SOME FOLDER/"); String multipartContentType = "multipart/form-data"; String fieldname = "file"; Part filePart = request.getPart(fieldname); Map<Object, Object> responseData = null;
  
  final PrintWriter writer = response.getWriter(); String linkName = null; String name = null;
  
  try { if (request.getContentType() == null || request.getContentType().toLowerCase().indexOf(multipartContentType) == -1) { throw new Exception("Invalid contentType. It must be " + multipartContentType); } filePart = request.getPart(fieldname); String type = filePart.getContentType(); type = type.substring(type.lastIndexOf("/") + 1); String extension = type; extension = (extension != null && !extension.equals("")) ? "." + extension : extension; name = UUID.randomUUID().toString() + extension; String absoluteServerPath = uploads + name; String path = request.getHeader("referer"); linkName = path + "files/" + name; String mimeType = filePart.getContentType(); String[] allowedExts = new String[] { "gif", "jpeg", "jpg", "png", "svg", "blob" }; String[] allowedMimeTypes = new String[] { "image/gif", "image/jpeg", "image/pjpeg", "image/x-png", "image/png", "image/svg+xml" }; if (!ArrayUtils.contains(allowedExts, FilenameUtils.getExtension(absoluteServerPath)) || !ArrayUtils.contains(allowedMimeTypes, mimeType.toLowerCase())) { File file = new File(uploads + name); if (file.exists()) { file.delete(); } throw new Exception("Image does not meet the validation."); } File file = new File(uploads, name); try (InputStream input = filePart.getInputStream()) { Files.copy(input, file.toPath()); } catch (Exception e) { writer.println("
  ERROR: " + e); } } catch (Exception e) { e.printStackTrace(); writer.println("You either did not specify a file to upload or are " + "trying to upload a file to a protected or nonexistent location."); writer.println("
  ERROR: " + e.getMessage()); responseData = new HashMap<Object, Object>(); responseData.put("error", e.toString()); } finally { if (responseData == null) { responseData = new HashMap<Object, Object>(); } responseData.put("link", linkName); String jsonResponseData = new Gson().toJson(responseData); response.setContentType("application/json"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(jsonResponseData); }
}

}

FileServlet.java manages the GET requests that come from the Froala Editor.

The requests come in the following format "http://server_address/**files**/name_of_file". To serve the resources, the servlet needs to have the same path as ImageUpload.java servlet.

package com.froala.examples.servlets;

import java.io.File; import java.io.IOException; import java.net.URLDecoder; import java.nio.file.Files;

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

@WebServlet("/files/*") public class FileServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException
 {
    String filename = URLDecoder.decode(request.getPathInfo().substring(1), "UTF-8");
    File file = new File("/PATH TO/YOUR PROJECT/WORKSPACE/WEBCONTENT/WEB-INF/SOME FOLDER/", filename);
    response.setHeader("Content-Type", getServletContext().getMimeType(filename));
    response.setHeader("Content-Length", String.valueOf(file.length()));
    response.setHeader("Content-Disposition", "inline; filename=\"" + file.getName() + "\"");
    Files.copy(file.toPath(), response.getOutputStream());
}

}