Note

The bridge:inputFile component is a legacy feature of Liferay Faces Bridge. Although it has the benefit of supporting multi-file uploads, it only works in a portlet environment (not in a webapp environment).

Please consider using h:inputFile since it works in both webapp and portlet environments. However, it does not have a multi-file upload feature.

The enclosing form must have enctype="multipart/form-data"

bridge:inputFile

InputFile is a UIInput component that renders an <input> element with type="file". Since it extends HtmlInputFile, it supports all the features of h:inputFile and also supports multi-file uploads.

Multiple Usage

Multi-file upload is supported by setting the HTML5 passthrough attribute multiple=multiple.


                   

Source Code

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:bridge="http://liferay.com/faces/bridge"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

	<h:form enctype="multipart/form-data">
		<bridge:inputFile fileUploadListener="#{bridgeInputFileBackingBean.handleFileUpload}" multiple="multiple" />
		<hr />
		<h:commandButton value="#{i18n['submit']}" />
		<ui:include src="../bridgeInputFileCommon.xhtml" />
	</h:form>

</ui:composition>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
	xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
	<c:set value="#{bridgeInputFileModelBean.uploadedFiles.size()}" var="totalFiles" />
	<h:dataTable id="modelValue" rendered="#{totalFiles > 0}" styleClass="files"
		value="#{bridgeInputFileModelBean.uploadedFiles}" var="uploadedFile">
		<h:column>
			<h:commandButton actionListener="#{bridgeInputFileBackingBean.deleteUploadedFile}"
				image="#{resource['images:icon-delete.png']}"
				onclick="if (! confirm('#{i18n['are-you-sure-you-want-to-delete-this']}')) {return false;}"
				value="#{uploadedFile.id}">
					<f:ajax render="@form" />
			</h:commandButton>
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputText rendered="#{totalFiles > 0}" value="#{i18n['file-name']}" />
			</f:facet>
			<h:outputText value="#{uploadedFile.name}" />
		</h:column>
		<h:column>
			<f:facet name="header">
				<h:outputText rendered="#{totalFiles > 0}" value="#{i18n['size']}" />
			</f:facet>
			<h:outputText value="#{uploadedFile.size}" />
		</h:column>
	</h:dataTable>
</ui:composition>
@ViewScoped
@ManagedBean
public class BridgeInputFileModelBean implements Serializable {

	// serialVersionUID
	private static final long serialVersionUID = 211172404377673109L;

	// Logger
	private static final Logger logger = LoggerFactory.getLogger(BridgeInputFileModelBean.class);

	// Private Data Members
	private List<UploadedFile> uploadedFiles;

	public List<UploadedFile> getUploadedFiles() {
		return uploadedFiles;
	}

	@PostConstruct
	public void postConstruct() {
		this.uploadedFiles = new ArrayList<UploadedFile>();
	}

	@PreDestroy
	public void preDestroy() {

		for (UploadedFile uploadedFile : uploadedFiles) {

			try {
				uploadedFile.delete();
			}
			catch (IOException e) {
				logger.error(e);
			}
		}

		uploadedFiles = null;
	}
}
@RequestScoped
@ManagedBean
public class BridgeInputFileBackingBean {

	// Logger
	private static final Logger logger = LoggerFactory.getLogger(BridgeInputFileBackingBean.class);

	@ManagedProperty(value = "#{bridgeInputFileModelBean}")
	private com.liferay.faces.bridge.demos.bean.BridgeInputFileModelBean bridgeInputFileModelBean;

	public void deleteUploadedFile(ActionEvent actionEvent) {

		UICommand uiCommand = (UICommand) actionEvent.getComponent();
		String fileId = (String) uiCommand.getValue();

		try {
			List<UploadedFile> uploadedFiles = bridgeInputFileModelBean.getUploadedFiles();

			UploadedFile uploadedFileToDelete = null;

			for (UploadedFile uploadedFile : uploadedFiles) {

				if (uploadedFile.getId().equals(fileId)) {
					uploadedFileToDelete = uploadedFile;

					break;
				}
			}

			if (uploadedFileToDelete != null) {
				uploadedFileToDelete.delete();
				uploadedFiles.remove(uploadedFileToDelete);
				logger.debug("Deleted file=[{0}]", uploadedFileToDelete.getName());
			}
		}
		catch (Exception e) {
			logger.error(e);
		}
	}

	public void handleFileUpload(FileUploadEvent fileUploadEvent) {

		List<UploadedFile> uploadedFiles = bridgeInputFileModelBean.getUploadedFiles();
		UploadedFile uploadedFile = fileUploadEvent.getUploadedFile();

		if (uploadedFile.getStatus() == UploadedFile.Status.FILE_SAVED) {

			FacesContext facesContext = FacesContext.getCurrentInstance();
			FacesMessage facesMessage = new FacesMessage("Received fileUploadEvent for file named '" +
					uploadedFile.getName() + "' in the " + fileUploadEvent.getPhaseId().toString() + " phase.");
			facesContext.addMessage(null, facesMessage);
			uploadedFiles.add(uploadedFile);
			logger.debug("Received fileName=[{0}] absolutePath=[{1}]", uploadedFile.getName(),
				uploadedFile.getAbsolutePath());
		}
		else {
			logger.error("Failed to receive uploaded file due to error status=[{0}] message=[{1}]",
				uploadedFile.getStatus(), uploadedFile.getMessage());
		}
	}

	public void setBridgeInputFileModelBean(
		com.liferay.faces.bridge.demos.bean.BridgeInputFileModelBean bridgeInputFileModelBean) {

		// Injected via @ManagedProperty annotation
		this.bridgeInputFileModelBean = bridgeInputFileModelBean;
	}
}
Liferay Faces Bridge Implementation 5.0.0 + Showcase Common 3.1.1 + Liferay Faces Util 3.4.1 + Mojarra 2.2.20