Upload cropped "croppie" image to server using Java PlayFramework 2.6

Question

I've googled for the past 2 days and still can't find a solution to this problem. I can upload fine using the input element with type attribute set to file. But I cannot upload the cropped image using croppie to the server.

Here is my register.scala.html:

 @helper.form(action = routes.ProfilesController.upload, 'id -> "profileForm", 'class -> "", 'enctype -> "multipart/form-data") { @CSRF.formField <div class="col-6 col-md-3 pic-padding"> <div id="upload-demo" class="upload-demo pic-1 mx-auto d-block rounded"> </div> <div class="pic-number" href="#">1</div> <label for="upload-pic1" class="pic-control-bg"> <img src="@routes.Assets.versioned("images/plus.png")" class="pic-control"> </label> <input type="file" id="upload-pic1" name="pic1" class="upload-btn" accept="image/*"> <button type="button" class="upload-result">Result</button> <script> Demo.init(); </script> </div> }

Here is my main.js:

 $('.upload-result').on('click', function (ev) { $uploadCrop.croppie('result', { type: 'canvas', size: 'viewport' }).then(function (resp) { $.ajax({ url: "http://localhost:9000/upload", type: "POST", data: {"image":resp}, success: function (data) { alert(resp); } }); }); });

Here is my ProfilesController.java

 public Result upload() { File file = request().body().asRaw().asFile(); return ok("File uploaded"); }

Here is a snippet from routes file:

 POST /upload controllers.ProfilesController.upload()

The error i get with the above solution is:

[CompletionException: java.lang.NullPointerException]

Please help! This has been stressing me out for the past 2 days, I just can't figure it out.

Answer 1

This is not fully solved, but i've progressed enough to produce a different problem. I ended up changing my ajax request in main.js to:

$.ajax({ url: " http://localhost:9000/upload ", type: "POST", data: resp, success: function (data) { alert(resp);

Then I also changed the profilecontroller.java to

public Result upload() {

    String dataUrl = request().body().asText();
    System.out.println(dataUrl);

    return ok("Data URI Passed");

}

This gave me the Data URI from javascript and passed it to the JAVA code. Now I need to try and upload the image using the Data URI. If you know the answer to this then please contribute to this post.