The downloaded file contains only "WebKitFormBoundary"

Question

I do not know what is going on here. Every time I try to upload a file, the whole file contains:

------WebKitFormBoundaryJ0uWMNv89fcUsC1t--

I have been looking for the last 2 days for some kind of explanation, but I'm just going in circles. I have no idea why this is happening.

The form:

 <form id="upload-file" ecntype="multipart/form-data"> <input name="picture" type="file"> <input type="button" value="Upload" id="upload-button" /> </form> 

JavaScript:

 $('#upload-button').click(function(e){ e.preventDefault(); var formData = new FormData($('#upload-file')); $.ajax({ url: '/image', type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ myXhr.upload.addEventListener('progress',progressHandlingFunction, false); } return myXhr; }, data: formData, cache: false, // contentType: false, processData: false }); }); 

Controller:

 def image = Action(parse.temporaryFile) { request => request.body.moveTo(new File("/tmp/picture")) Ok("File uploaded") } 

Answer 1

The problem occurred in Javascript, not Scala. I did not refer to form elements inappropriately.

 var formData = new FormData($('#upload-file')[0]); 

However, I also had problems with parse.temporaryFile , and it incorrectly saved the file using the code above. When I checked the saved files in a text editor, I noticed that there is still material at the beginning of the file ------WebKitFormBoundaryJ0uWMNv89fcUsC1t-- , followed by the form data, and then the byte files.

To fix this, I just used the default method for multi-page loading according to the Play Documentation , and it worked fine.

 def image = Action(parse.multipartFormData) { request => request.body.file("picture").map { picture => val filename = picture.filename picture.ref.moveTo(new File(s"/tmp/picture/$filename")) Ok("ok") }.getOrElse { InternalServerError("file upload error") } }