Froala Documentation

Java File Upload

File Upload

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

Dependencies

The java file 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.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
 </head>

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

<body> 
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
 
 <div class="sample">
 <h2>File upload example.</h2>
 <form>
 <textarea id="edit" name="content"></textarea>
 </form>
 </div>

Initialize the editor and set the file upload URL

 <script>
 new FroalaEditor('#edit', {
 // Set the file upload URL.
 fileUploadURL: '/UploadFiles',
 fileUploadParams: {
 id: 'my_editor'
 }
 })
 </script>
</body>
</html>

The full code should look like this:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
 </head>
 
 <body>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.pkgd.min.js"></script>
 
 <div class="sample">
 <h2>File upload example.</h2>
 <form>
 <textarea id="edit" name="content"></textarea>
 </form>
 </div>
 
 <script>
 new FroalaEditor('#edit', {
 fileUploadURL: '/UploadFiles',
 fileUploadParams: {
 id: 'my_editor'
 }
 })
 </script>
 </body>
</html>

Backend

FileUpload.java servlet handles the upload part. The servlet has basic file 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 file 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;
 
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 UploadFile
 */
@WebServlet(name = "FileUploadServlet", urlPatterns = {
 "/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.
 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);
 
 // Create path components to save the file.
 Map < Object, Object > responseData;
 final PrintWriter writer = response.getWriter();
 String linkName = null;
 
 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 field name and also file extension.
 String type = filePart.getContentType();
 type = type.substring(type.lastIndexOf("/") + 1);
 
 // Generate random name.
 String extension = type;
 extension = (extension != null && extension != "") ? "." + extension : extension;
 String name = UUID.randomUUID().toString() + extension;
 
 // Get absolute server path.
 String absoluteServerPath = uploads + name;
 
 // Create link.
 String path = request.getHeader("referer");
 linkName = path + "files/" + name;
 
 // 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.");
 }
 
 // Save the file on server.
 File file = new File(uploads, name);
 
 try (InputStream input = filePart.getInputStream()) {
 Files.copy(input, file.toPath());
 } catch (Exception e) {
 writer.println("<br/> 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("<br/> ERROR: " + e.getMessage());
 responseData = new HashMap < Object, Object > ();
 responseData.put("error", e.toString());
 
 } finally {
 responseData = new HashMap < Object, Object > ();
 responseData.put("link", linkName);
 
 // Send response data.
 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 FileUpload.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());
 }
}

Image Upload

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

Ready to dive in? Explore our plans

See plans

URL: https://froala.com/wysiwyg-editor/docs/server/java/file-upload/

⇱ File Upload Java Integration Guide