Upload a File with Jersey using AJAX and HTML5 progress bar

In this tutorial we will show you how to upload a file with Jersey Rest Service using AJAX and HTML5 progress bar. First we start by creating our jersey restful service. We’ve chosen to configure jersey using annotations, this means that we no longer need the web.xml servlet descriptor. Next we create a web page which’ll use JQuery to make AJAX requests to the server to asynchronously upload an file, image or video to the server. Finally we use the new HTML 5 progress bar to display the upload status to the user.

Project Structure

This is a default Maven 3 Project. Here is an overview how the project is structured.

src
|--main
|    +--java
|        +--com
|            +--memorynotfound
|                +--rs
|                    |--ApplicationConfig.java
|                    |--FileUploadRestService.java
|    +--resources
|    +--webapp
|        +--resources
|            +--css
|                |--progressbar.css
|            +--js
|                +--lib
|                    |--jquery-2.1.4.min.js
|                |--upload.js
|        |--index.html
pom.xml

Dependencies

Add the following dependencies to the project.

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
                             http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <modelVersion>4.0.0</modelVersion>
    <groupId>com.memorynotfound.webservice.rs.jersey1</groupId>
    <artifactId>file-upload</artifactId>
    <version>1.0.0-SNAPSHOT</version>
    <packaging>war</packaging>
    <name>JERSEY - ${project.artifactId}</name>
    <url>https://memorynotfound.com</url>

    <properties>
        <jersey.version>2.20</jersey.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.glassfish.jersey.containers</groupId>
            <artifactId>jersey-container-servlet</artifactId>
            <version>${jersey.version}</version>
        </dependency>
        <dependency>
            <groupId>org.glassfish.jersey.media</groupId>
            <artifactId>jersey-media-json-jackson</artifactId>
            <version>${jersey.version}</version>
        </dependency>
        <dependency>
            <groupId>org.glassfish.jersey.media</groupId>
            <artifactId>jersey-media-multipart</artifactId>
            <version>${jersey.version}</version>
        </dependency>
    </dependencies>

</project>

Jersey File Upload Rest Service

This rest service will handle the upload request from the client. The @FormDataParam annotation in conjunction with the media type multipart/form-data should be used for submitting and consuming forms that contain files, non-ASCII data, and binary data.

The InputStream class holds the uploaded file.

The FormDataContentDisposition class is simply a representation of the Content-Disposition header and contains meta information about the uploaded file.

package com.memorynotfound.rs;

import javax.ws.rs.Consumes;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import javax.ws.rs.core.Response.Status;
import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.Files;
import org.glassfish.jersey.media.multipart.FormDataContentDisposition;
import org.glassfish.jersey.media.multipart.FormDataParam;

@Path("/upload")
public class FileUploadRestService {

    @POST
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    public Response uploadFile(
            @FormDataParam("file") InputStream in,
            @FormDataParam("file") FormDataContentDisposition info) throws IOException {

        File upload = new File(info.getFileName());

        if (upload.exists()){
            String message = "file: " + upload.getName() + " already exists";
            return Response.status(Status.CONFLICT).entity(message).build();
        } else {
            Files.copy(in, upload.toPath());
            return Response.status(Status.OK).build();
        }
    }

}

Registering Jersey RestServices

We register the rest service using annotations. For more information how to configure jersey with annotations only.

package com.memorynotfound.rs;

import org.glassfish.jersey.media.multipart.MultiPartFeature;

import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

import javax.ws.rs.ApplicationPath;
import javax.ws.rs.core.Application;

@ApplicationPath("/api")
public class ApplicationConfig extends Application {

    @Override
    public Set<Class<?>> getClasses() {
        final Set<Class<?>> resources = new HashSet<Class<?>>();
        resources.add(MultiPartFeature.class);
        return resources;
    }

    @Override
    public Map<String, Object> getProperties() {
        Map<String, Object> properties = new HashMap<String, Object>();
        properties.put("jersey.config.server.provider.packages", "com.memorynotfound.rs");
        return properties;
    }
}

Upload File using HTML5 and AJAX

This web page will upload a file via AJAX and display the progress in a HTML 5 progress bar.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="resources/css/progressbar.css">
    <script src="resources/js/lib/jquery-2.1.4.min.js"></script>
    <script src="resources/js/upload.js"></script>
</head>
<body>

    <h1>Upload a File</h1>

    <progress max=100></progress>
    <span id="progress_percent">0</span>%

    <p>Choose : <input type="file" name="upload_file" /></p>
    <button id="upload_btn">Start Uploading</button>

</body>
</html>

AJAX File Upload

The upload() method will upload the file to the server asynchrounous using AJAX. When the method is called we add a progress event listener to the upload which’ll update the progress bar.

$(function(){
    $('#upload_btn').click(upload);
});

function upload(){
    var file = $('input[name="upload_file"]').get(0).files[0];

    var formData = new FormData();
    formData.append('file', file);

    $.ajax({
        url: 'api/upload',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(){
            alert('file upload complete');
        },
        error: function(response){
            var error = "error";
            if (response.status === 409){
                error = response.responseText;
            }
            alert(error);
        },
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', progress, false);
            } else {
                console.log('Upload progress is not supported.');
            }
            return myXhr;
        }
    });
}

function progress(e) {
    if (e.lengthComputable) {
        $('#progress_percent').text(Math.floor((e.loaded * 100) / e.total));
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

Demo

URL: http://localhost:8080/jersey-file-upload/

References

• Injecting with @FormDataParam
• FormDataParam JavaDoc
• FormDataContentDisposition JavaDoc
• Styling HTML5 progress with CSS

Download