Отправка данных Multipart/form через javascript в Play Framework

Обычно, когда мы отправляем какую-либо составную форму в Play Framework, в этот момент в контроллере нужно упомянуть действие перенаправления, которое обновляет всю страницу и создает дополнительную нагрузку на сеть.

Эту форму можно отправить с помощью Ajax. Это упрощает отправку формы и помогает обновить только тот конкретный раздел, в котором вы хотите отразить изменения.

1. Мы создаем многочастную форму для загрузки файла и некоторой другой информации.

<form id="profileForm" enctype="multipart/form-data">
<input type="file" name="fileUpload">
<input type="submit" value="Upload" id="ajaxCallUpload">
</form>

2. Мы разрабатываем вызов Ajax для отправки формы, используя FormData. Объект FormData позволяет скомпилировать набор пар ключ/значение для отправки с помощью XMLHttpRequest. Он в первую очередь предназначен для использования при отправке данных форм, но может использоваться независимо от форм для передачи данных с ключами.

Когда мы вызываем этот вызов Ajax, чем в FormData, мы передаем form_ID, чтобы он сделал свой объект.

Мы определяем некоторые важные вещи, такие как -

1. тип звонка,

2. URL, на который мы должны отправить данные,

3. заголовки,

4. dataType это может быть json,

5. processData может быть ложным или истинным,

6. contentType может быть false или application/json ,

7. данные передаем те данные которые находим из формы.

Мы также упоминаем его успех, когда упоминаем, что мы должны делать, когда вызов будет успешным, и ошибку, где мы упоминаем, что мы должны делать, когда вызов не будет выполнен.

$("#ajaxCallUpload").click(function (e) {
var formData = new FormData($("#profileForm")[0]);
e.preventDefault();
$.ajax({
type: "POST"
url: '/upload',
headers: { 'IsAjax': 'true' },
dataType: "json",
processData: false,
contentType: false,
data: formData,
success: function (result) {
onSuccessUpload(data);
},
error: function (error) {
onErrorUpload(error)
}
});
});
var onSuccessUpload = function (result) {
if(result == "File uploaded"){
alert("file uploaded successfully.")
}else{
alert("file not uploaded. Try again !!!")
}
}
var onErrorUpdateProfile = function (error) {
alert("Oops !! Something went wrong.")
}
3. Define Post request in routes for call the action in controller.
POST  /upload  @controllers.UserController.uploadFile
4. Define an action in the UserController.
val uploadService: UploadService
def uploadFile = ScuredAction.async { implicit request =>
val temporaryFile: Option[MultipartFormData[TemporaryFile]] = request.body.asMultipartFormData
val result = uploadService.uploadData(temporaryFile)
Ok(result)
}
5.  Create a service which take your data and saved it.
def uploadData(requestedData: Option[MultipartFormData[TemporaryFile]]): String = {
log.error("Called uploadFile function" + request)
requestedData foreach { fileData =>
fileData.file("file").map {image =>
import java.io.File
val filename = image.filename
val contentType = picture.contentType
log.error("File name : $filename, content type : $contentType")
picture.ref.moveTo(new File("tmp/$filename"))
"File uploaded"
}.getOrElse {
"Missing file"
}