Froala Editor v4.2.0 is Here LEARN MORE
Java
Video Upload
The following code example illustrates how to handle video upload on your server using Java as a server-side language. For step by step explanation of the upload flow see video upload concept.
Dependencies
The java video upload example needs the following dependencies:
- commons-codec-1.1.jar
- commons-io-2.5-javadoc.jar
- commons-io-2.5.jar
- commons-lang-2.6-javadoc.jar
- commons-lang-2.6-sources.jar
- commons-lang-2.6.jar
- gson-2.7-javadoc.jar
- gson-2.7.jar
- servlet-api.jar
- thumbnailator-0.4.8.jar
Frontend
This is the HTML that you need to include in your WebContent folder:
- On the
headsection include the Editor style. - On the
bodysection include the Editor JS files and define the area for the editor. - Initialize the editor and set the video upload URL
<!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>Video upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
// Set the video upload URL.
videoUploadURL: '/UploadFiles',
videoUploadParams: {
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>Video upload example.</h2>
<form>
<textarea id="edit" name="content"></textarea>
</form>
</div>
<script>
new FroalaEditor('#edit', {
videoUploadURL: '/UploadFiles',
videoUploadParams: {
id: 'my_editor'
}
})
</script>
</body>
</html>
Backend
VideoUpload.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 video passes the validation step, the server responds with a JSON object containing a link to the uploaded video.
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 UploadFile
*/
@WebServlet(name = "VideoUploadServlet", urlPatterns = {
"/upload_video"
})
@MultipartConfig
public class VideoUpload extends HttpServlet {
private static final long serialVersionUID = 1L;
public VideoUpload(){
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[] {
"mp4",
"webm",
"ogg"
};
String[] allowedMimeTypes = new String[] {
"video/mp4",
"video/webm",
"video/ogg"
};
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 VideoUpload.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.