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