Challenge Engineer Life !

エンジニア人生を楽しみたい!仕事や趣味で学んだ技術的なことを書いていくブログです。

JSF2.0なのでPrimeFacesを使ってファイルアップロード

今回の開発にファイルアップロードはないかな、と思っていたのですが、ありました(^^;

Java EE7でJSF2.2になれば標準機能でできるようになるとのことですが…↓

@den2snさんの記事
リリース間近!Java EE 7の気になるところ

現時点(2013/5/20)で自分はJava EE6でJSF2.0にて開発してるので標準が使えません(>_<)

幸いPrimeFacesを使っているので、FileUploadコンポが利用できそうです。
既に@kisさんが色々触られています↓

で、さっそく自分も組み込もうと思ったら、意外としょうもない所でつまづいてしまったので、メモ。

まずは簡単なサンプルを、と思ってPrimeFaces3.5のユーザガイドから「Simple File Upload」のコードを参考に(というかほぼ同じ…)以下作りました。

JSFのビュー

ここで貼りつけたコードはbodyタグのみで、他は省略してます。
formにはenctypeを指定します。

<h:body>
    <h:form enctype="multipart/form-data">
        <p:fileUpload value="#{fileUploadBean.file}" mode="simple" />
        <p:commandButton value="upload" ajax="false" />
    </h:form>
</h:body>
BackingBean

PrimeFacesのUploadedFile型の変数を置くだけ(^^;マジすか。

package jp.co.hoge.upload;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import org.primefaces.model.UploadedFile;

@ManagedBean(name = "fileUploadBean")
@ViewScoped
public class FileUploadBean implements Serializable {

    private UploadedFile file;

    public UploadedFile getFile() {
        return file;
    }

    public void setFile(UploadedFile file) {
        this.file = file;
    }
}
web.xmlにFilter設定
<filter>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
</filter>
    
<filter-mapping>
    <filter-name>PrimeFaces FileUpload Filter</filter-name>
    <servlet-name>Faces Servlet</servlet-name>
</filter-mapping>

ユーザガイド上はこれだけ、なんですが、これだけで動くの!?と半信半疑(^^;

とりあえず実行すると…エラーとなりました。
stacktraceみると

Caused by: java.lang.ClassNotFoundException:org.apache.commons.fileupload.FileItemFactory

みたいなエラーが。

ここが微妙にハマった所ですが、PrimeFacesのFileUploadは裏でcommons-fileupload、commons-ioを利用しているとのことです。
これはユーザガイドにも記述があるのですが、FileUploadの章とは別の所に記述があって最初気づかなかった…です(^^;

commonsはそれぞれ最新バージョンでユーザガイドのより新しいのがありましたが、一応ユーザガイドに従って

  • commons-fileupload version 1.2.1
  • commons-io version 1.4

を使いました。

maven使っていれば

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.1</version>
</dependency>
<dependency>
    <groupId>commons-io</groupId>
    <artifactId>commons-io</artifactId>
    <version>1.4</version>
</dependency>

をpom.xmlに書けばOKです。

再度実行

で、無事に実行できて

f:id:kikutaro777:20130520220846j:plain

画面はこんな感じに(今回のビュー定義だけで勝手になるので、なんか色々工夫もいりそう…)

参照押すとファイル選択ダイアログが出てきて

f:id:kikutaro777:20130520220853j:plain

選択します。

f:id:kikutaro777:20130520220954j:plain

で、Uploadボタン押してbean側でブレイクしてみたところ

f:id:kikutaro777:20130520221009j:plain

おお、データが入ってる!

UploadedFileがgetInputstream()とかを持っているので、あとはファイルに書きだす感じですかね。

ユーザガイドみると自動アップロードとか色々なことできそうなので、触る機会があればまとめたい所です。

にほんブログ村 IT技術ブログへ
にほんブログ村 にほんブログ村 IT技術ブログ Javaへ
にほんブログ村