Java

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());
    }
}

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

Java

File Upload

Dependencies

Frontend

Backend

Ready to dive in? Explore our plans

Froala AI Assistant

How was your chat experience?