Untitled

@POST
@Path("/upload")
@Consumes(ExtendedMediaType.MULTIPART_FORM_DATA)
@Produces(ExtendedMediaType.APPLICATION_JSON_UTF8)
@ApiOperation(
        value = "Upload a selected image",
        notes = "Return with the ID of the uploaded image.",
        response = ByteArrayInputStream.class)
@ApiResponses(value = {
        @ApiResponse(code = NotAcceptedMediaTypeError.HTTP_RESPONSE_CODE, message = NotAcceptedMediaTypeError.SWAGGER_API_RESPONSE_MESSAGE, response = ErrorInfo.class)})
@Transactional
@Override
public Response uploadImage(@RequestParam("file") final InputStream file) throws IOException, NotAcceptedMediaTypeError, ParseException {

    try (LimitedSizeInputStream limitedSizeInputStream = new LimitedSizeInputStream(file, maxFileSize)) {
        byte[] content = IOUtils.toByteArray(limitedSizeInputStream);

        // check the type of the uploaded file
        org.apache.tika.mime.MediaType uploadedMediaType = ContentTypeDetector.getMediaType(content);
        boolean validMediaType = acceptedExtensions.contains(uploadedMediaType.toString());

        if (validMediaType) {
            Image image = Image.builder().content(content).build();
            imageMapper.saveImage(image);

            FormDataContentDisposition fileDetail = new FormDataContentDisposition(CustomHttpHeader.PROCESS_ID);

            ImageMetadata imageMetadata = buildImageMetadata(fileDetail, image);
            imageMapper.saveMetadata(imageMetadata);

            return Response.ok().entity(imageMetadata.getUuid()).build();
        } else {
            throw new NotAcceptedMediaTypeError(uploadedMediaType.toString(), acceptedExtensions);
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Service</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
</head>
<body>
    <h1>RDBMS Image REST Service</h1>
    <h3>File upload demo</h3>
    <ul>
        <li>
            <form id="upload-file-form" method="post" enctype="multipart/form-data">
                Upload your file: <input type="file" name="file" size="45" />
                <br>
                <input id="submit-button" type="submit" value="Upload" />
            </form>
        </li>
        <li><p>Result: <br><span id="result"></span></p></li>
    </ul>

    <h3>Show Image</h3>
    <ui>
        <li>original:<img id="image-o" src="#" alt="original image" /></li>
        <li>small: <img id="image-s" src="#" alt="small image" /></li>
        <li>medium: <img id="image-m" src="#" alt="medium image" /></li>
        <li>large: <img id="image-l" src="#" alt="large image" /></li>
        <li>extra large: <img id="image-xl" src="#" alt="extra large image" /></li>
    </ui>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#submit-button').click(function (event) {
                //stop submit the form, we will post it manually
                event.preventDefault();

                // get form
                var form = $('#upload-form')[0];

                // create an FormData object
                var data = new FormData(form);

                // disabled the submit button
                $("#submit-button").prop("disabled", true);

                // post data
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: "api/upload",
                    data: data,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,

                    success: function (data) {
                        // shows server's response
                        $("#result").text(data);
                        console.log("SUCCESS: ", data);

                        enableSubmitButton();
                        updateImages(data);
                    },

                    error: function (e) {
                        // shows server's response
                        $("#result").text(e.responseText);
                        console.log("ERROR: ", e);

                        enableSubmitButton();
                        updateImages(e.responseText);
                    }
                });
            });
        });

        function enableSubmitButton() {
            $("#submit-button").prop("disabled", false);
        }

        function updateImages(data) {
            var url = 'http://localhost:9001/image/api/' + data;
            $('#image-s').attr('src',url + '?size=s');
            $('#image-m').attr('src',url + '?size=m');
            $('#image-l').attr('src',url + '?size=l');
            $('#image-xl').attr('src',url + '?size=xl');
            $('#image-o').attr('src',url + '?size=o');
        }
     </script>
  </body>
</html>