0

I'm trying to send an image to Java PlayFramework using AJAX, then save it into somehere in server.

The HTML code is only:

<input type="file" accept="image/*" capture="camera" id="image">

So, how to send the file using AJAX? And how to get the file using PLAY Framework?

I've used base64 string, but get exception said "String too long". Images with low size have no problem. But image with hundreds KB or above will get the exception.

Any solution or better method for this?

Thank you.

biesior
  • 55,576
  • 10
  • 125
  • 182
heojahr
  • 1
  • 1

2 Answers2

0

You can use Formdata like here

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.ajax({
  url: 'http://example.com/script.php',
  data: fd,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});
Community
  • 1
  • 1
Julien D
  • 1,259
  • 9
  • 22
0

maybe this can help you. This is actually how to send and store mp3(base64) to PLAY Framework via form. I hope this could help you a bit:

main.scala.html

<!-- AUDIO -->
    <section id="sound">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
    <form action="**@routes.Application.upload()**"  name="addProductForm" id="addProductForm" enctype="multipart/form-data" method="post">
        <label>Select file.
            <input name="base64" type="text" accept="*/*" value="data:audio/mp3;base64,//sQxAAABKh...JZsdf2y/FOtQ==" >
            <!-- START This is actually not needed.Because you dont want use the uploader itself -->
            <input name="picture" type="file" accept="*/*" >
            <!-- ENDE This is actually not needed.Because you dont want use the uploader itself -->
          </label>
        <input name="submit" type="submit" size="50" value="senden">

    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- AUDIO -->

Very Important , to use FileUtils in Java just install org.apache.common.io.FileUtils (!!!)

Application.java

public static Result upload(){

    System.out.println("Entered the upload() method !!!");

    play.mvc.Http.MultipartFormData body = request().body().asMultipartFormData();
    DynamicForm dynamicForm = Form.form().bindFromRequest();

    play.mvc.Http.MultipartFormData.FilePart picture = body.getFile("picture");
    String str = dynamicForm.get("base64");

    // example: "data:audio/mp3;base64,//sQxAAABKhrG...f2y/FOtQ==";

    String[] strsplited = str.split(",");
    String b64 = strsplited[1];
    if (picture != null) {

        File file = picture.getFile();
        String fileName = file.getName();

        System.out.println("\n\n"+file.getPath()+"/"+fileName);
        try {
            /* START This is actually not needed.Because you dont want use the uploader itself */
            File destination = new File("/Applications/MAMP/htdocs/play_old/myapp/public/upload/", file.getName());
            FileUtils.moveFile(file,destination);
            /* ENDE This is actually not needed.Because you dont want use the uploader itself */

            java.security.SecureRandom random = new java.security.SecureRandom();
            String newFileName = new BigInteger(130, random).toString(32);
            byte[] data = Base64.getDecoder().decode(b64);
            File dest = new File("/Applications/MAMP/htdocs/play_old/myapp/public/upload/", newFileName+".mp3");
            FileUtils.writeByteArrayToFile(dest,data);
            System.out.println("Byte size: "+data.length);
            System.out.println("Create new mp3 file :"+bi+".mp3");

        } catch(IOException e){
            e.getMessage();
        }

    } else {
        flash("error", "Missing file");
        return badRequest();
    }

    return ok("File uploaded");

}

routes

POST  /upload           controllers.Application.upload()
Imeksbank
  • 104
  • 5