PrimefacesのFileUploadコンポーネントの例のチュートリアル

2年 ago
光, 明
13 minutes

今日はPrimefacesのFileUploadコンポーネントについて調べてみましょう。HTMLではファイルを選択するためにファイル入力タグを提供していますが、ファイルをサーバーにアップロードするためにはそれ以上の作業が必要です。Primefacesは、美しいUIを作成するための準備が整っているFileUploadコンポーネントを提供することで、その負担を軽減しています。バックエンドのサポートも含めて、ファイルのアップロードを行うのに役立ちます。

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

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

プライムフェイセスのファイルアップロードの基本情報

Tag fileUpload
Component Class org.primefaces.component.fileupload.FileUpload
Component Type org.primefaces.component.FileUpload
Component Family org.primefaces.component
Renderer Type org.primefaces.component.FileUploadRenderer
Renderer Class org.primefaces.component.fileupload.FileUploadRenderer

PrimefacesのFileUploadの属性

Name Default Type Description
id null String Unique identifier of the component.
rendered true boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered
binding null Object An el expression that maps to a server side UIComponent instance in a backing bean
value null Object Value of the component than can be either an EL expression of a literal text
converter null Converter/String An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id.
immediate false Boolean When set true, process validations logic is executed at apply request values phase for this component
required false Boolean Marks component as required.
validator null MethodExpr A method expression that refers to a method validating the input
valueChangeListener null MethodExpr A method expression that refers to a method for handling a valueChangeEvent
requiredMessage null String Message to be displayed when required field validation fails
converterMessage null String Message to be displayed when conversion fails.
validatorMessage null String Message to be displayed when validation fails.
widgetVar null String Name of the client side widget.
update null String Component(s) to update after fileupload completes.
process null String Component(s) to process in fileupload request.
fileUploadListener null MethodExpr Method to invoke when a file is uploaded.
multiple false Boolean Allows choosing of multi file uploads from native
auto false Boolean When set to true, selecting a file starts the upload process implicitly
label Choose String Label of the browse button.
allowTypes null String Regular expression for accepted file types,
sizeLimit null Integer Individual file size limit in bytes.
fileLimit null Integer Maximum number of files allowed to upload.
style null String Inline style of the component.
styleClass null String Style class of the component.
mode advanced String Mode of the fileupload, can be simple or advanced.
uploadLabel Upload String Label of the upload button.
cancelLabel Cancel String Label of the cancel button.
invalidSizeMessage null String Message to display when size limit exceeds.
invalidFileMessage null String Message to display when file is not accepted.
fileLimitMessage null String Message to display when file limit exceeds.
dragDropSupport true Boolean Specifies dragdrop based file selection from filesystem, default is true and works only on supported browsers
onstart null String Client side callback to execute when upload begins.
onerror null String Callback to execute if fileupload request fails.
oncomplete null String Client side callback to execute when upload ends.
disabled false Boolean Disables component when set true.
messageTemplate {name} {size} String Message template to use when displaying file validation errors
previewWidth 80 Integer Width for image previews in pixels.

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

FileUploadを使用するためには、以下の値を取る可能性のあるprimefaces.UPLOADERウェブ展開パラメータを追加して、FileUploadエンジンを提供する必要があります。

<context-param>
  <param-name>primefaces.UPLOADER</param-name>
  <param-value>auto|native|commons</param-value>
</context-param>
    1. オート：これはデフォルトのモードであり、Primefaces はランタイム環境をチェックして最適な方法を検出しようとします。もしJSFランタイムが2.2以上であればネイティブアップローダーが選択され、そうでなければコモンズが選択されます。

 

    1. ネイティブ：ネイティブモードでは、サーブレット3.x Part APIを使用してファイルをアップロードします。もしJSFランタイムが2.2未満である場合、例外がスローされます。

 

    コモンズ：このオプションはコモンズファイルアップロードを選択します。デプロイメントディスクリプタには以下のフィルター設定が必要です。

web.xmlはXMLファイルであり、Javaのウェブアプリケーションで使用される設定ファイルです。

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

以下の点に注意してください。この場合、servlet-nameはJSFサーブレットの設定された名前であるFaces Servletと一致する必要があります。また、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.scdev.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 "";
	}
}

ウェブドットエクスエル

<?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.scdev</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のFileUploadエンジンは自動です。

 

    1. fileUploadコンポーネントのvalue属性はUploadedFileインスタンスと関連付けられています。

 

    1. fileUploadの使用には、フォーム内にfileUploadコンポーネントを含める必要があります。そのenctypeはmultipart/form-dataです。

 

    提供されているダミーアクションは、アップロードされたファイルの名前とサイズを表示するために使用されています。

場所によって、デモの結果は次のようになります：シンプルな入力ボタンがブラウザ上にレンダリングされます。そして、ダミーアクションをクリックすると、ダミーアクションメソッドが実行され、アップロードされたファイルの情報が以下のようにコンソールに表示されます。

プライムフェイセスの高度なファイルアップロード

FileUploadコンポーネントは、シンプルビューとアドバンスドビューの2つのビューを提供します。アドバンスドビューを選択すると、アップロードされたファイルにアクセスする唯一の方法は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.scdev.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も言及されていないため、変更がないです。

 

    1. FileUploadコンポーネントのvalue属性は、UploadedFileインスタンスと関連付けられています。また、このコンポーネントはFileUploadListenerによっても監視されています。

 

    1. FileUploadListenerはFileUploadEventをパラメータとして受け取ります。

 

    「アップロード」アクションをクリックすると、FileUploadListenerが実行され、FileUploadEventが作成されて渡されます。

デモの結果、アップロードコンポーネントが新しいビューで表示され、2つの追加ボタンが表示されます。1つはアップロード、もう1つはキャンセルです。実行結果として以下のポイントに注意することが重要です。

    1. アップロードされたファイルは、FileUploadEvent内で渡され、イベントオブジェクトに対してe.getFile()を呼び出すことでアクセスすることができます。これにより、UploadedFileインスタンスが返されます。

 

    アップロードをキャンセルするためには、アップロードの代わりに「キャンセル」をクリックする必要があります。アップロードをキャンセルすると、リスナーの呼び出しが行われなくなります。

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

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.scdev.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. 「キャンセル」ボタンを使ってアップロードをキャンセルすると、全てのファイルのアップロードプロセスもキャンセルされます。

 

    1. 各ファイルの横にあるXアイコンをクリックすると、対応するファイルのみがキャンセルされます。

 

    「アップロード」アクションをクリックすると、ロードされるファイルの数に応じてリスナーが呼び出されます。

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（Partial Page Render）を使用してページ上の任意のコンポーネントを更新することができます。このために、FileUploadにはupdate属性が備わっています。以下の例は、ファイルのアップロード後に「ファイルのアップロードが成功しました」というメッセージをgrowlコンポーネントで表示します。メッセージの詳細は後でmessagesに入る際に説明されます。以下のコードフラグメントは、ファイルのアップロード後にメッセージを表示するのに役立ちます。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.scdev.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ファイルのアップロードのバリデーションメッセージ

バリデーションメッセージをユーザーに表示するために、invalidFileMessage、invalidSizeMessage、およびfileLimitMessageのオプションがあります。これらのバリデーションのためのメッセージを好きなように提供することができます。提供された例を以下の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のファイルアップロードプロジェクトをダウンロードしてください。

コメントを残す 0

Your email address will not be published. Required fields are marked *