Primefaces ファイルアップロードコンポーネントの例 tutorial

今日はPrimefacesのFileUploadコンポーネントについて見ていきます。HTMLではファイルを選択するためのfile入力タグを提供していますが、サーバーにファイルをアップロードするにはもっと多くのものが必要です。Primefacesはサーバーにファイルをアップロードするためのバックエンドサポートを持つ美しいUIを作成するのを助けるFileUploadコンポーネントを提供することで、その負担を取り除いてくれました。

Primefacesファイルアップロード

私たちは、アプリケーションで使用できるPrimefacesのFileUploadコンポーネントの機能について調査します。このチュートリアルでは、Primefaceの基本的な知識があることを前提としています。もしない場合は、Primefacesの例を参照してください。

Primefaces ファイルアップロード 基本情報

Primefacesファイルアップロード属性

Primefacesファイルアップロードの例

FileUploadを利用するには、primefaces.UPLOADERというウェブデプロイメントパラメータを追加してFileUploadエンジンを提供する必要があります。このパラメータは以下の値を取ることがあります: web.xml

<context-param>
  <param-name>primefaces.UPLOADER</param-name>
  <param-value>auto|native|commons</param-value>
</context-param>

1. 自動: これはデフォルトモードであり、Primefacesは実行環境を確認することによって最適な方法を検出しようとします。JSFの実行環境が少なくとも2.2の場合はネイティブアップローダーが選択され、それ以外の場合はcommonsが選択されます。
2. ネイティブ: ネイティブモードでは、サーブレット3.xパートAPIを使用してファイルをアップロードしますが、JSFランタイムが2.2未満の場合、例外がスローされます。
3. コモンズ: このオプションはコモンズのファイルアップロードを選択します。デプロイメント記述子に次のフィルター設定が必要です。

web.xml

<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>

サーブレット名は、この場合フェイスサーブレットであるJSFサーブレットの設定された名前と一致する必要があります。あるいは、URLパターンに基づいた設定を行うこともできます。

Primefaces 単純なファイルアップロード

シンプルなファイルアップロードモードはレガシーブラウザで動作し、ファイル入力の値はUploadedFileインスタンスである必要があります。シンプルなアップロードではAjaxアップロードはサポートされていません。シンプルなファイルアップロードサンプルを作成するために必要なこれらのファイルについては、以下をご覧ください。index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data">
				<p:fileUpload value="#{fileUploadManagedBean.file}"  mode="simple"></p:fileUpload>
				<p:separator/>
				<h:commandButton value="Dummy Action" action="#{fileUploadManagedBean.dummyAction}"></h:commandButton>
		</h:form>
	</h:body>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.model.UploadedFile;

@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
	UploadedFile file;

	public UploadedFile getFile() {
		return file;
	}

	public void setFile(UploadedFile file) {
		this.file = file;
	}

	public String dummyAction(){
		System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
		return "";
	}
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xmlns="https://java.sun.com/xml/ns/javaee" xmlns:web="https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="https://java.sun.com/xml/ns/javaee
	https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<context-param>
		<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>primefaces.UPLOADER</param-name>
		<param-value>auto</param-value>
	</context-param>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

pom.xml

<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.journaldev</groupId>
  <artifactId>Primefaces-FileUpload-Sample</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  <name>Primefaces-FileUpload-Sample Maven Webapp</name>
   <url>https://maven.apache.org</url>
	<repositories>
		<repository>
			<id>prime-repo</id>
			<name>PrimeFaces Maven Repository</name>
			<url>https://repository.primefaces.org</url>
			<layout>default</layout>
		</repository>
	</repositories>
	<dependencies>
		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<!-- Faces Implementation -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Faces Library -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Primefaces Version 5 -->
		<dependency>
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>5.0</version>
		</dependency>
		<!-- JSP Library -->
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>
		<!-- JSTL Library -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>
	</dependencies>
</project>

要約として:

1. Primefacesのファイルアップロードエンジンは自動です。
2. UploadedFileインスタンスに関連付けられたfileUploadコンポーネントのvalue属性.
3. fileUploadを使用するには、form内にfileUploadコンポーネントを含める必要があり、そのenctypeはmultipart/form-dataです。
4. 提供されたダミーアクションは、アップロードされたファイルの名前とサイズを出力するために使用されました。

デモの結果は、シンプルな入力ボタンがあなたのブラウザにレンダリングされたことになります。

Primefaces 高度なファイルアップロード

FileUploadコンポーネントはシンプルなビューと高度なビューを提供します。高度なビューを選択すると、アップロードされたファイルにアクセスする唯一の方法はFileUploadListenerを介することになります。リスナーは、ファイルがアップロードされた直後に処理され、FileUploadEventがパラメーターとしてリスナーに渡されます。高度なモードを使用するために必要なファイルを以下に示します。index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data" style="width:500px">
				<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced"
								fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"></p:fileUpload>
		</h:form>
	</h:body>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
	UploadedFile file;

	public UploadedFile getFile() {
		return file;
	}

	public void setFile(UploadedFile file) {
		this.file = file;
	}

	public void fileUploadListener(FileUploadEvent e){
		// Get uploaded file from the FileUploadEvent
		this.file = e.getFile();
		// Print out the information of the file
		System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
	}
}

要約として:

1. web.xmlもpom.xmlも変更されていないため、言及されていません。
2. アップロードされたファイルインスタンスに関連付けられたファイルアップロードコンポーネントの値属性。コンポーネントはファイルアップロードリスナーによっても監視されています。
3. FileUploadListenerはパラメータとしてFileUploadEventを受け取ります。
4. 一度アップロードアクションをクリックすると、FileUploadListenerが実行され、FileUploadEventが作成されて渡されます。

デモの結果は、アップロードコンポーネントの新しいビューとなり、アップロード用のボタンとキャンセル用のボタンの2つの追加ボタンが表示されます。

1. アップロードされたファイルはFileUploadEvent内で渡され、イベントオブジェクトに対してe.getFile()を呼び出すことでアクセスでき、UploadedFileインスタンスを返します。
2. アップロードプロセスは、もしアップロードの代わりにキャンセルをクリックした場合、完全にキャンセルされます。アップロードをキャンセルすると、リスナーが呼び出されるのを防ぎます。

プライムフェイシーズの複数ファイルアップロード

FileUploadコンポーネントを使用して複数のファイルをアップロードすることは、ブラウザのダイアログから複数のファイルを選択できるために適用されます。レガシーブラウザでは複数のアップロードはサポートされていません。複数のファイル選択を可能にするためにmultiple属性をtrueに設定しますが、複数のファイル選択がすべてのファイルが1つのリクエストでサーバーに送信されることを意味するわけではありません。実際には、ファイルは1つずつ送信されます。複数の選択を適用するために必要な変更を以下に示します。index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data" style="width:500px">
				<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced" multiple="true"
								fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"></p:fileUpload>
		</h:form>
	</h:body>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
	UploadedFile file;

	public UploadedFile getFile() {
		return file;
	}

	public void setFile(UploadedFile file) {
		this.file = file;
	}

	public void fileUploadListener(FileUploadEvent e){
		// Get uploaded file from the FileUploadEvent
		this.file = e.getFile();
		// Print out the information of the file
		System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
	}
}

アプリケーションを実行した結果は以下のようになります:

デモから以下のポイントに注意することが重要です:

1. アップロードをキャンセルボタンを使用してキャンセルすると、すべてのファイルのアップロードプロセスがキャンセルされることになります。
2. アップロードされるすべてのファイルの横にあるアイコンXをクリックすると、対応するファイルのアップロードがキャンセルされます。
3. アップロードアクションをクリックすると、リスナーは読み込まれるファイルの数によって呼び出されます。

Primefaces 自動ファイルアップロード

デフォルトの動作では、ユーザーがアップロードプロセスをトリガーする必要がありますが、これを変更するには、autoをtrueに設定します。ダイアログからファイルが選択されると、オートアップロードが即座にトリガーされます。オートアップロードを適用可能にするための必要な変更を以下に示します。index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data" style="width:500px">
				<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced" multiple="true" auto="true"
								fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"></p:fileUpload>
		</h:form>
	</h:body>
</html>

アプリケーションを実行した結果は以下のようになります:

ブラウザウィンドウで「開く」をクリックすると、アップロードプロセスがすぐに開始されます。

Primefaces ファイルアップロード部分ページ更新

ファイルアップロードプロセスが完了した後、Primefaces PPR（部分ページレンダリング）を使用してページ上の任意のコンポーネントを更新できます。ファイルアップロードにはこの目的のためにアップデート属性が装備されています。以下の例では、ファイルアップロード後にグロウルコンポーネントを使用して「ファイルが正常にアップロードされました」というメッセージを表示します。グロウルコンポーネントは、メッセージについて話す際に後で説明します。以下のコードの断片は、ファイルがアップロードされた後にメッセージを表示するのに役立ちます。index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data" style="width:500px">
				<p:growl id="msg"></p:growl>
				<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced"
								fileUploadListener="#{fileUploadManagedBean.fileUploadListener}" update="msg"></p:fileUpload>
		</h:form>
	</h:body>
</html>

package com.journaldev.prime.faces.beans;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;

import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
	UploadedFile file;

	public UploadedFile getFile() {
		return file;
	}

	public void setFile(UploadedFile file) {
		this.file = file;
	}

	public void fileUploadListener(FileUploadEvent e){
		// Get uploaded file from the FileUploadEvent
		this.file = e.getFile();
		// Print out the information of the file
		System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
		// Add message
		FacesContext.getCurrentInstance().addMessage(null,new FacesMessage("File Uploaded Successfully"));
	}
}

ここで、実行の結果は以下のようになります。

FacesContext にメッセージが追加され、FileUpload コンポーネントはupdate 属性を定義します。これにより、メッセージが Ajax 機構を通じてレンダリングされます。Ajax の動作については、後の別のチュートリアルで説明します。

ファイルアップロードフィルター

ユーザーは、設定したファイルタイプのみを選択できるように制限される場合があります。以下の例は、画像のみを受け入れる方法を示しています。index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data" style="width:500px">
				<p:growl id="msg"></p:growl>
				<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
								fileUploadListener="#{fileUploadManagedBean.fileUploadListener}" update="msg"></p:fileUpload>
		</h:form>
	</h:body>
</html>

そして、実行の結果は以下のようになります。

Primefacesのファイルアップロードサイズ制限とファイル制限

時には、アップロードするファイルのサイズやファイルの数を制限する必要があります。このような制限は、PrimefacesのFileUploadコンポーネントを使うことで大きな問題ではありません。この制限は、FileUpload自体にsizeLimit & fileLimit属性を設定することで実現できます。以下は、ユーザーを制限するためのコードの一部です：index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data" style="width:500px">
				<p:growl id="msg"></p:growl>
				<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced" multiple="true" fileLimit="3" sizeLimit="2048"
								fileUploadListener="#{fileUploadManagedBean.fileUploadListener}" update="msg"></p:fileUpload>
		</h:form>
	</h:body>
</html>

3つ以上のファイルをアップロードしようとするか、ファイルのサイズが制限を超えると、以下のようなエラーメッセージが表示されます:

Primefaces ファイルアップロード検証メッセージ

無効なファイルメッセージ、無効なサイズメッセージ、および ファイル制限メッセージ オプションは、ユーザーに検証メッセージを表示するために提供されています。これらの検証に対して表示したいメッセージを自由に提供できます。以下の提供された例を見てください。index.xhtml

<html xmlns="https://www.w3.org/1999/xhtml"
	xmlns:ui="https://java.sun.com/jsf/facelets"
	xmlns:h="https://java.sun.com/jsf/html"
	xmlns:f="https://java.sun.com/jsf/core"
	xmlns:p="https://primefaces.org/ui">
	<h:head>
		<title>Journaldev Tutorial</title>
	</h:head>
	<h:body>
		<h:form enctype="multipart/form-data" style="width:500px">
				<p:growl id="msg"></p:growl>
				<p:fileUpload value="#{fileUploadManagedBean.file}"
								invalidSizeMessage="JournalDev: Invalid Size"
								invalidFileMessage="JournalDev: Invalid File Type"
								fileLimitMessage="JournalDev: Invalid File Limit"
								mode="advanced" multiple="true" fileLimit="3" sizeLimit="2048"
								allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
								fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"
								update="msg"></p:fileUpload>
		</h:form>
	</h:body>
</html>

そして、メッセージは以下のように見えるべきです:

メッセージが変更され、異なるテキスト値が提供されていることに気づいた場合。管理された bean コードを確認しても、ファイルには何もしていません。ただし、実際の状況では、UploadedFile の getInputstream() メソッドを使用してファイルデータを取得し、サーバーまたはデータベースにファイルとして保存することができます。

Primefacesファイルアップロードの概要

このチュートリアルは、FileUpload Primefaces コンポーネントの使用についての詳細な説明を提供することを目的としています。FileUpload コンポーネントには多くの機能が備わっており、類似のものを実装しようとするのではなく、ビジネスに集中できます。以下のリンクからサンプルプロジェクトをダウンロードし、他の fileUpload 属性を使用してさらに学ぶことができます。

PrimeFacesのファイルアップロードプロジェクトをダウンロードする