2012-02-26 6 views
23

、マルチパートデータとフォーム:play2の他の入力を使ってアップロードファイルを取得する方法は? HTMLでは

<form action="@routes.Files.upload" method="post" enctype="multipart/form-data"> 
    <input type="hidden" name="groupId" value="1" /> 
    <input type="hidden" name="tagId" value="2" /> 
    <input type="file" name="file"/> 
    <input type="submit" value="upload it"/> 
</form> 

アクションFiles uploadを書くためにどのように?

request.body.file("file") map { 
    filepart => filepart.ref.moveTo(newFile); 
} 

そして、どのように提出得るために、入力:

Form(tuple("groupId" -> text, "tagId" -> text)).bindFromRequest.fold(
    errors => ..., 
    params => .... 
) 

しかし、どのようにそれらを一緒に結合する

は私がアップロードされたファイルを取得する方法を知っていますか?

fileのタイプはForm(tuple(...))で使用できますが、入力値を取得する方法もrequest.bodyではありません。

答えて

25

この回答はJavaのものですが、あなたはScalaにそれをかなり簡単に適用できるはずです。

フォーム内のすべてのフィールドにモデルを定義する必要があるのは、ファイルを除いてです。その後、ファイルアップロードAPIを使用してファイルを取得します。

たとえば、これは私がやったことです:

フォーム(upload.scala.html中):

@form(action = routes.UploadResourceController.doUpload(), 'enctype -> "multipart/form-data") { 

    @inputText(uploadForm("lang")) 
    @inputText(uploadForm("country")) 
    @inputFile(uploadForm("resourceFile")) 

    <p> 
     <input type="submit"> 
    </p> 
} 

モデル(モデル/ UploadResource.java):

public class UploadResource { 
    @Required 
    public String lang; 

    @Required 
    public String country; 

    /* notice a field for the file is missing */ 
} 

コントローラ(controllers/UploadResource Controller.java):

public static Result doUpload() { 
    Form<UploadResource> filledForm = uploadForm.bindFromRequest(); 

    if (filledForm.hasErrors()) { 
     return badRequest(views.html.upload.render(filledForm)); 
    } else { 
     UploadResource resource = filledForm.get(); 
     MultipartFormData body = request().body().asMultipartFormData(); 
     FilePart resourceFile = body.getFile("resourceFile"); 

     /* Check resourceFile for null, then extract the File object and process it */ 
    } 
} 

これが役立ちます。フォームフィールドが必要なScalaでは

+0

再生

Upload.upload({ url: '/api/upload', method:'POST', data: { "file": user.profilePic, //file object "username": user.username } }).then(function (resp) { //console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data); }, function (resp) { console.log('Error status: ' + resp.status); }, function (evt) { var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); //console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); }); 

アンギュラ機能何がモデルで、ファイルの場所を保存したい場合は?それ以外の場合は、ファイルを処理した後のファイルの場所をどのように知ることができますか?私は "ファイルアップロードAPI"が何であるか不足していると思います - http://commons.apache.org/proper/commons-fileupload/using.html? –

+0

@SkylarSaveland - このコードでは、フォームデータとファイルを取得できます。ファイル(私の例ではresourceFile)を取得したら、そのファイルを保存する場所に移動し、場所とファイル名でモデルを更新します。 – JBCP

13

例:

モデル:

case class Specs (userid: String) 

コントローラー:

object Upload extends Controller { 
    val uploadForm = Form(
     mapping(
       "userid" -> nonEmptyText 
     )(Specs.apply)(Specs.unapply) 
    ) 
    def upload = Action(parse.multipartFormData) { implicit request => 
     val sp : Option[Specs] = uploadForm.bindFromRequest().fold (
      errFrm => None, 
      spec => Some(spec) 
    ) 
     request.body.file("file").map { f => 
     sp.map { spec => 
      val filePath = ... // incorporate userid 
      // XXX: file read to memory b4 writing to disk. bad for large files 
      f.ref.moveTo(new File(filePath), replace=true) 
      Ok("File uploaded") 
     }.getOrElse{ 
      BadRequest("Form binding error.") 
     } 
     }.getOrElse { 
     BadRequest("File not attached.") 
     } 
    } 
} 
3

別の例として、これを行う方法は、このことができます:

モデル:

def upload = Action(parse.multipartFormData) { implicit request => 
    uploadForm.bindFromRequest().fold(
    hasErrors => Ok(ourFormHTML(hasErrors), 
    specs => { 
     request.body.file("inputFileFieldName") match { 
     case Some(file) => { 
      import java.io.File 
      val filename = file.filename 
      val contetType = file.contentType 
      file.ref.moveTo(new File(Play.application().path().getAbsolutePath + file.filename)) 
      Ok("congratz you did it") 
     } 
     case _ => Ok(ourHTML if we dont send file but want the form anyway) 
     } 
    } 


) 

いけないあなたは何が悪かったのか不思議に思ってしまうかもしれないので、ファイルに名前を付けるのを忘れ

case class Specs(userId: String) 

コントローラ。

2

角度を使用してファイルをアップロードしていて、他のフォームパラメータを使用していました。私は以下のように私のものを作りました。

2.1コントローラ

/** 
* 
*Upload user profile 
**/ 
public static Result upload() { 
    Logger.info("Uploading images##"); 
    Http.MultipartFormData body = request().body().asMultipartFormData(); 
    Http.MultipartFormData.FilePart profile = body.getFile("file"); 
    if (profile != null) { 
     File file = profile.getFile(); 

     //upload file to a directory 
     //todo 

     //get the username from form 
      Map<String,String[]> dataPart = request().body().asMultipartFormData().asFormUrlEncoded(); 
      String username = dataPart.get("username")[0]; 

      //save/update the details with ebean 

     return ok("File uploaded"); 
    } else { 

     return status(400, "Missing file"); 
    } 
} 
関連する問題