Play Framework - Ajax web service call image request issue

Question

I have developed web service using Play framework. I have created POST rest service in Play framework as below.

In routes file:

POST    /imageUpload        controllers.Application.imageUpload()

In Application.java:

public static Result imageUpload() {
    ObjectNode result = Json.newObject();

    MultipartFormData body = request().body().asMultipartFormData();
    FilePart file = body.getFile("file");
    File trainImg = file.getFile();
    File temp = new File("/Play_Framework/temp.jpg");
    trainImg.renameTo(temp);// moved the image to another folder to check the correct image.

    .
    .
    .

    return ok(result);
}

In the service, I have written the code to save the image which is received from the request. I have called this service from the Ajax as given below.

In my index.html file:

var formData = new FormData();
var blob = new Blob([imageData], { type: "image/jpg"});
formData.append("file", blob, "capturedImage.jpg");

$.ajax({
       url: 'http://localhost:9000/imageUpload',
       data: formData,
       crossDomain: true,
       processData: false,
       contentType: false,
       async: false,
       cache: false,
       dataType: "json",
       type: 'POST',
       success: function(data){
            alert(data);
            var responseStr = JSON.stringify(data);
                alert("Response str -- "+responseStr);
       }
       });

When I upload the file as Multipart form data, I can receive it as multipart data in the server side. But it is stored as "multipartBody7906599875117091855asTemporaryFile".

If I get this file's mimitype - "content/unknown".

When I debug, I got the below multipart form data path "/var/folders/f3/r3rfqfl949z5pf2cprwn95dm0000gn/T/multipartBody7906599875117091855asTemporaryFile".

How do parse this as "jpg" file? Can anyone help me to do this?

score 1 · Answer 1 · edited May 23 '17 at 11:51

The following worked for me:

Application.java

public class Application extends Controller {

    public static Result index() {
        return ok(index.render("SO answer 30229421"));
    }

    public static Result imageUpload() {
        ObjectNode result = Json.newObject();

        Http.MultipartFormData body = request().body().asMultipartFormData();
        Http.MultipartFormData.FilePart file = body.getFile("file");
        File trainImg = file.getFile();
        File temp = new File("/tmp/temp.jpg");
        trainImg.renameTo(temp); // moved the image to another folder to check the correct image.

        result.put("path", temp.getAbsolutePath());
        return ok(result);
    }

    public static Result imageDownload(String path) {
        return ok(new File(path));
    }

index.scala.html

@(message: String)

<html>
<body>
    <h1>@message</h1>
    <input type="file" id="imageData"/>
    <button onclick="send()">Send image</button>

    <div id="image">
    </div>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>

    function send() {
        var imageData = $('#imageData')[0].files[0];

        var formData = new FormData();
        var blob = new Blob([imageData], { type: "image/jpg"});
        formData.append("file", blob, "capturedImage.jpg");

        $.ajax({
               url: 'http://localhost:9000/imageUpload',
               data: formData,
               crossDomain: true,
               processData: false,
               contentType: false,
               async: false,
               cache: false,
               dataType: "json",
               type: 'POST',
               success: function(data){
                    $('#image').html('<img src="http://localhost:9000/imageDownload?path=' + data.path + '"/>');
               }
       });
    }
    </script>

</body>
</html>

The only difference, is that because you didn't include how you get the imageData value, I used this version (as per this SO answer):

var imageData = $('#imageData')[0].files[0];

Play Framework - Ajax web service call image request issue

1 Answers1