Froala WYSIWYG Editor - Java integration example

FileUpload.java

package com.froala.examples.servlets;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
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 javax.servlet.http.Part;

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

import com.froala.editor.Utils;
import com.google.gson.Gson;

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

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

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

		// The route on which the file is saved.
		String fileRoute = "/public/";

		String multipartContentType = "multipart/form-data";
		String fieldname = "file";

		Map<Object, Object> responseData;
		try {

			// Check content type.
			if (request.getContentType() == null
					|| request.getContentType().toLowerCase().indexOf(multipartContentType) == -1) {

				throw new Exception("Invalid contentType. It must be " + multipartContentType);
			}

			// Get file Part based on fieldname.
			Part filePart = request.getPart(fieldname);

			if (filePart == null) {
				throw new Exception("Fieldname is not correct. It must be: " + fieldname);
			}

			// Generate random name.
			String extension = FilenameUtils.getExtension(Utils.getFileName(filePart));
			extension = (extension != null && extension != "") ? "." + extension : extension;
			String name = Utils.generateUniqueString() + extension;

			// Create link.
			String linkName = fileRoute + name;

			// Get file stream from Part.
			InputStream fileContent = filePart.getInputStream();

			// Get absolute server path.
			String absoluteServerPath = request.getServletContext().getRealPath(linkName);

			// Copy file to disk.
			java.io.File targetFile = new java.io.File(absoluteServerPath);
			FileUtils.copyInputStreamToFile(fileContent, targetFile);

			// Validate file.
			String mimeType = filePart.getContentType();
			String[] allowedExts = new String[] { "txt", "pdf", "doc" };
			String[] allowedMimeTypes = new String[] { "text/plain", "application/msword", "application/x-pdf",
					"application/pdf" };

			if (!ArrayUtils.contains(allowedExts, FilenameUtils.getExtension(absoluteServerPath))
					|| !ArrayUtils.contains(allowedMimeTypes, mimeType.toLowerCase())) {

				// Delete the uploaded file.
				File file = new File(absoluteServerPath);
				if (file.exists()) {
					file.delete();
				}
				throw new Exception("File does not meet the validation.");
			}

			responseData = new HashMap<Object, Object>();
			responseData.put("link", linkName);

		} catch (Exception e) {
			e.printStackTrace();
			responseData = new HashMap<Object, Object>();
			responseData.put("error", e.toString());
		}

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

ImageUpload.java

package com.froala.examples.servlets;

import java.io.File;
import java.io.IOException;
import java.io.InputStream;
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 javax.servlet.http.Part;

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

import com.froala.editor.Utils;
import com.google.gson.Gson;

/**
 * Servlet implementation class UploadImage
 */
@WebServlet("/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 {

		// The route on which the file is saved.
		String fileRoute = "/public/";

		String multipartContentType = "multipart/form-data";
		String fieldname = "file";

		Map<Object, Object> responseData;
		try {

			// Check content type.
			if (request.getContentType() == null
					|| request.getContentType().toLowerCase().indexOf(multipartContentType) == -1) {

				throw new Exception("Invalid contentType. It must be " + multipartContentType);
			}

			// Get file Part based on fieldname.
			Part filePart = request.getPart(fieldname);

			if (filePart == null) {
				throw new Exception("Fieldname is not correct. It must be: " + fieldname);
			}

			// Generate random name.
			String extension = FilenameUtils.getExtension(Utils.getFileName(filePart));
			extension = (extension != null && extension != "") ? "." + extension : extension;
			String name = Utils.generateUniqueString() + extension;

			// Create link.
			String linkName = fileRoute + name;

			// Get image stream from Part.
			InputStream fileContent = filePart.getInputStream();

			// Get absolute server path.
			String absoluteServerPath = request.getServletContext().getRealPath(linkName);

			// Copy image to disk.
			java.io.File targetFile = new java.io.File(absoluteServerPath);
			FileUtils.copyInputStreamToFile(fileContent, targetFile);

			// Validate image.
			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())) {

				// Delete the uploaded image.
				File file = new File(absoluteServerPath);
				if (file.exists()) {
					file.delete();
				}
				throw new Exception("Image does not meet the validation.");
			}

			responseData = new HashMap<Object, Object>();
			responseData.put("link", linkName);

		} catch (Exception e) {
			e.printStackTrace();
			responseData = new HashMap<Object, Object>();
			responseData.put("error", e.toString());
		}

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

}

index.html

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"/>
  <script src="/bower_components/jquery/dist/jquery.min.js"></script>

  <!-- Include Font Awesome. -->
  <link href="/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

  <!-- Include Froala Editor styles -->
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" />
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/froala_style.min.css" />

  <!-- Include Froala Editor Plugins styles -->
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/char_counter.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/code_view.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/colors.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/emoticons.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/file.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/fullscreen.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/image_manager.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/image.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/line_breaker.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/table.css">
  <link rel="stylesheet" href="/bower_components/froala-wysiwyg-editor/css/plugins/video.css">

  <!-- Include Froala Editor -->
  <script src="/bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>

  <!-- Include Froala Editor Plugins -->
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/align.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/char_counter.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/code_beautifier.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/code_view.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/colors.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/emoticons.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/entities.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/file.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/font_family.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/font_size.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/fullscreen.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/image.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/image_manager.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/inline_style.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/line_breaker.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/link.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/lists.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/paragraph_format.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/paragraph_style.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/quote.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/save.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/table.min.js"></script>
  <script src="/bower_components/froala-wysiwyg-editor/js/plugins/video.min.js"></script>
  <!-- End Froala -->

</head>

<body>
  <div class="sample">
    <h2>File/Image upload example.</h2>
    <form>
      <textarea id="edit" name="content"></textarea>
    </form>
  </div>
  <script>
    $(function() {
      $('#edit').froalaEditor({
        fileUploadURL: './upload_file',
        fileUploadParams: {
          id: 'my_editor'
        },
        imageUploadURL: './upload_image',
        imageUploadParams: {
          id: 'my_editor'
        },
      })
    });
  </script>
</body>

</html>

MyContextListener.java

package com.froala.examples.servlets;

import java.io.File;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

public class MyContextListener implements ServletContextListener {

	@Override
	public void contextDestroyed(ServletContextEvent arg0) {

	}

	// Run this before web application is started
	@Override
	public void contextInitialized(ServletContextEvent event) {

		// Create public folder.
		// Eclipse deploys the apps to
		// workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/
		// So public folder is located here:
		// workspace/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/Examples/public
		ServletContext servletContext = event.getServletContext();
		String contextpath = servletContext.getRealPath("/");
		String publicFolderPath = contextpath + "public";
		File path = new File(publicFolderPath);

		if (!path.exists()) {
			path.mkdirs();
		}

		System.out.println("Public folder is located here: " + publicFolderPath);
	}
}