How to include a picture type in a form in Play!2

Question

According to this guide, one can upload files by writing the html form by hand. I want to handle file upload as part of a bigger form that includes text fields (for example name and email). Here is what I have to far (quite ugly):

def newUser = Action(parse.multipartFormData) { implicit request =>{   
    //handle file
    import play.api.mvc.MultipartFormData.FilePart
    import play.api.libs.Files.TemporaryFile

    var uploadSuccessful = true 
    var localPicture: FilePart[TemporaryFile] = null

    request.body.file("picture").map { picture =>
    localPicture = picture   }.getOrElse {
    uploadSuccessful = false   }

    //process the rest of the form
    signupForm.bindFromRequest.fold(
      errors => BadRequest(views.html.signup(errors)),
      label => {
        //file uploading code here(see guide), including error checking for the file.

        if(uploadSuccesful){
        User.create(label._1, label._2, label._3._1, 0, "NO PHOTO", label._4)
        Redirect(routes.Application.homepage).withSession("email" -> label._2)
        } else {
        Redirect(routes.Application.index).flashing(
        "error" -> "Missing file"
        }
      })
     }   }

This looks tremendously ugly to me. Note that I have defined a signupForm somewhere that includes all fields (apart from the file upload one). My question is: Is there a prettier way of going about this? Perhaps by including the file field in the signupForm and then handling errors uniformly.

Answer 1

So far I think it's not possible to bind binary data to a form directly, you can only bind the reference (e.g. the picture's ID or name). You could however reformulate your code a bit:

def newUser() = Action(parse.multipartFormData) { implicit request => 
  import play.api.mvc.MultipartFormData.FilePart
  import play.api.libs.Files.TemporaryFile

  request.body.file("picture").map { picture =>
    signupForm.bindFromRequest.fold(
      errors => BadRequest(views.html.signup(errors)),
      label => {
        User.create(label._1, label._2, label._3._1, 0, picture.absolutePath(), label._4)
        Redirect(routes.Application.homepage).withSession("email" -> label._2)
      }
    )
  }.getOrElse(Redirect(routes.Application.index).flashing("error" -> "Missing file"))
}

Answer 2

You can use the asFormUlrEncoded, like below:

def upload = Action(parse.multipartFormData) { request =>
  val formField1 = request.body.asFormUrlEncoded("formField1").head;
  val someOtherField = request.body.asFormUrlEncoded("someOtherField").head;
  request.body.file("photo").map { picture =>
    ...
  }
}