CODEWITHSUNDEEP
jsffile-uploadprimefaces
user3354561
user3354561

Reputation: 41

<p:fileUpload> with other input elements (commandButton) in form

I am trying to upload a file with a parameter which identifies the file, example if there is a parameter role, which contains student as value then uploading file should contain student details.

So in a single form I am trying to capture roleid and using <p:fileUpload>, here when I select the role and click on file uploader selected role id is captured as null

I am using JSF p:fileUpload following is the code: 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">

            <h:form enctype="multipart/form-data">

                <p:panel>

                    <h:panelGrid id="grid">

                        <h:outputLabel for="role" value="Role" style="font-weight:bold" />
                        <p:selectOneMenu id="role" value="#{userBean.selectedroleid}"
                            style="width:100%">
                            <f:selectItem itemLabel="Select User Type" itemValue="" />
                            <f:selectItems value="#{userBean.roles}" var="role"
                                itemLabel="#{role.role}" itemValue="#{role.id}" />
                        </p:selectOneMenu>
                        <h:outputText value="" />

                    </h:panelGrid>

                    <f:facet name="footer">
                        <p:fileUpload fileUploadListener="#{userBean.readCSVFile}"
                            mode="advanced" dragDropSupport="false" fileLimit="1"
                            allowTypes="/(\.|\/)(csv)$/" label="Select" immediate="true" />
                        <p:commandButton value="Save" action="#{userBean.readCSVFile1()}"
                            style="margin:0px" update="grid" icon="ui-icon-disk"
                            validateClient="true" />


                    </f:facet>

                </p:panel>
            </h:form>
        </ui:define>
    </ui:composition>
</h:body>
</html>

User bean: capture role and file 

 @ManagedBean
    @ViewScoped
    public class UserBean implements Serializable {


        @Inject
        private RoleService roleService;

        private Integer selectedroleid;

        private List<Role> roles;

        public List<Role> getRoles() {
            return roles;
        }
        public void setRoles(List<Role> roles) {
            this.roles = roles; 

        }
        @PostConstruct
        public void initialize() {

            this.roles = roleService.getRoles();

        }   

        public void readCSVFile(FileUploadEvent event) throws IOException {


            logger.debug("Reading data from csv and convert to java object:");      
            System.out.println("selected role Id " + selectedroleid);
            System.out.println("selected file  " + event.getFile().getFileName());

        }

    public void readCSVFile1() throws IOException {


            logger.debug("Reading data from csv and convert to java object:");      
            System.out.println("selected role Id " + selectedroleid);   

        }



        public Integer getSelectedroleid() {
            return selectedroleid;
        }

        public void setSelectedroleid(Integer selectedroleid) {
            System.out.println(" selected role id "+ selectedroleid);
            this.selectedroleid = selectedroleid;
        }



    }

and I have Upload Filter mapping also in Web.xml, for uploading file using JSF. 

<filter>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
        <init-param>
        <param-name>thresholdSize</param-name>
        <param-value>2097152</param-value>
        </init-param>     
        </filter>
        <filter-mapping>
        <filter-name>PrimeFaces FileUpload Filter</filter-name>
        <servlet-name>Faces Servlet</servlet-name>
        </filter-mapping>

But the problem is that if I select the role and click on file uploader selected role id is captured as null, were as if I click Save button, correct value for role is getting capture at user bean.

I want to get role id along with file upload or some how I want to capture both role and file in the same page.

Upvotes: 1

Views: 2712

Answers (2)

steve
steve

Reputation: 625

It's an old question, but i've run into this problem with primefaces 6.2

The reason of the problem: the file upload should be a single input of a form or it can be an ajax request (in case of mode="advanced") without posting/processing other inputs.

My workaround: the upload listener just stores the file, and the business logic (with other inputs) is done in a remoteCommand:

xhtml:

<h:form>
  <p:inputText value="#{helloWorld.msg}" />
  ...
  <p:fileUpload mode="advanced" auto="true"
              fileUploadListener="#{helloWorld.handleUpload}"
              oncomplete="uploadBusinessLogic();"/>
  <p:remoteCommand name="uploadBusinessLogic" actionListener="#{helloWorld.uploadBusinessLogic}"/>
</h:form>

bean:

private String msg;
private InputStream file;

public void handleUpload(FileUploadEvent event) {
    try {
        this.file = event.getFile().getInputstream();
    } catch (IOException e) {
        //...
    }
}

public void uploadBusinessLogic() {
    // msg and file is up to date
}

Upvotes: 1

Blue Ocean
Blue Ocean

Reputation: 282

you can use remoteCommand for passing value to backing bean. try something like this : 

<p:remoteCommand name="passValue">
    <f:setPropertyActionListener for="role"
                                 value="#{userBean.selectedroleid}"
                                 target="#{userBean.selectedroleid}"/>
</p:remoteCommand>

then add onStart option to your fileUploader like:

onstart="passValue()"

Upvotes: 2

Related Questions