Primefaces多文件上传添加p:selectOneMenu下拉框技术需求问询

Alright, let's figure out how to add a Primefaces-style p:selectOneMenu to each uploaded file in your file upload component. I’ve tackled this exact scenario before, so here’s a step-by-step solution that keeps the look and feel consistent with native Primefaces components:

Primefaces' p:fileUpload component supports custom templates, which lets us inject the p:selectOneMenu directly into each file entry. We’ll also use a map to track which dropdown value is tied to each uploaded file (since the default UploadedFile class doesn’t have extra properties for custom data).

1. Configure the Custom File Upload Template #

First, we’ll define a custom template for the file upload component to include the dropdown menu alongside each file’s details.

XHTML Page (Main Form) #

<h:form enctype="multipart/form-data">
    <p:fileUpload
        id="customFileUpload"
        mode="advanced"
        multiple="true"
        auto="false"
        uploadedFiles="#{fileUploadBean.uploadedFiles}"
        template="/WEB-INF/templates/fileUploadWithDropdown.xhtml"
        allowTypes="/(\.|\/)(pdf|doc|docx|png|jpg)$/"
    />

    <p:commandButton 
        value="Submit Files & Options" 
        action="#{fileUploadBean.processFiles}" 
        ajax="false"
        styleClass="ui-margin-top"
    />
</h:form>

Custom Template File (fileUploadWithDropdown.xhtml) #

This template mirrors the native Primefaces file upload layout but adds the p:selectOneMenu for each file:

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://xmlns.jcp.org/jsf/html">

    <div class="ui-fileupload-row ui-widget-content ui-corner-all">
        <!-- File Preview/Name -->
        <div class="ui-fileupload-preview">
            <p:graphicImage value="#{file.previewUrl}" rendered="#{not empty file.previewUrl}" />
            <h:outputText value="#{file.name}" rendered="#{empty file.previewUrl}" />
        </div>

        <!-- File Details + Dropdown -->
        <div class="ui-fileupload-details">
            <h:outputText value="#{file.name}" />
            <h:outputText value="(#{file.size} KB)" style="margin-left: 10px;" />
            
            <!-- Primefaces-style dropdown -->
            <p:selectOneMenu 
                value="#{fileUploadBean.fileToOptionMap[file.uniqueId]}"
                style="width: 180px; margin-left: 20px;"
            >
                <f:selectItem itemLabel="Select Option" itemValue="" />
                <f:selectItem itemLabel="Internal Document" itemValue="INTERNAL" />
                <f:selectItem itemLabel="Client-facing" itemValue="CLIENT" />
                <f:selectItem itemLabel="Archive" itemValue="ARCHIVE" />
            </p:selectOneMenu>
        </div>

        <!-- Remove Button -->
        <div class="ui-fileupload-actions">
            <p:commandLink 
                action="#{fileUploadBean.removeFile(file)}" 
                update="customFileUpload" 
                process="@this"
            >
                <span class="ui-icon ui-icon-close"></span>
            </p:commandLink>
        </div>
    </div>

</ui:composition>

2. Managed Bean to Track Files and Dropdown Values #

We’ll use a Map to link each file’s unique ID to its selected dropdown value. This ensures we can pair files with their options when processing the upload.

import org.primefaces.model.UploadedFile;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import java.io.Serializable;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Named
@ViewScoped
public class FileUploadBean implements Serializable {

    private List<UploadedFile> uploadedFiles;
    private Map<String, String> fileToOptionMap = new HashMap<>();

    // Process files and their selected options on submit
    public void processFiles() {
        if (uploadedFiles == null || uploadedFiles.isEmpty()) {
            // Handle empty upload case
            return;
        }

        for (UploadedFile file : uploadedFiles) {
            String selectedOption = fileToOptionMap.get(file.getUniqueId());
            // Your business logic here: save file + option to database, etc.
            System.out.printf("File: %s | Selected Option: %s%n", file.getFileName(), selectedOption);
        }
    }

    // Remove a file and its associated dropdown value
    public void removeFile(UploadedFile file) {
        uploadedFiles.remove(file);
        fileToOptionMap.remove(file.getUniqueId());
    }

    // Getters and Setters
    public List<UploadedFile> getUploadedFiles() {
        return uploadedFiles;
    }

    public void setUploadedFiles(List<UploadedFile> uploadedFiles) {
        this.uploadedFiles = uploadedFiles;
    }

    public Map<String, String> getFileToOptionMap() {
        return fileToOptionMap;
    }

    public void setFileToOptionMap(Map<String, String> fileToOptionMap) {
        this.fileToOptionMap = fileToOptionMap;
    }
}

3. Ensure Style & Interaction Consistency #

• The p:selectOneMenu will automatically inherit Primefaces’ default styling (including hover effects, dropdown animations, and responsive behavior) since we’re using the native component.
• If you need to adjust layout alignment, tweak the inline styles or add Primefaces utility classes (like ui-grid-col) to the template’s divs.
• For dynamic dropdown options (loaded from a database or service), replace the hardcoded f:selectItem entries with f:selectItems bound to a list in your bean:

  <f:selectItems 
      value="#{fileUploadBean.documentOptions}" 
      var="opt" 
      itemLabel="#{opt.label}" 
      itemValue="#{opt.value}"
  />
  

内容的提问来源于stack exchange，提问作者Sandeep YS