jsffile-uploadprimefacesmyfacestomahawk

t:inputFileUpload always return null while submitting form


<h:body>
  <div id="main" align="center" style="width:100%;height: 100%">
    <f:view>
      <h:form id="catform" enctype="multipart/form-data">
        <p:panel styleClass="ui-panel-titlebar"  id="panel1" header="Add New Category" >
          <h:panelGrid columns="3" style="border:0px"  styleClass="ui-panel-content">
            <h:outputText value="Parent Category:"  />
            <h:selectOneMenu id="parentcat" value="#{CategoryMB.selectedCatId}">
              <f:selectItems value="#{CategoryMB.categories}" var="cat" itemLabel="#{cat.categoryName}" itemValue="#{CategoryMB.categoryId}" />
            </h:selectOneMenu>

            <p:message for="parentcat" />

            <h:outputText value="Category Name:" />
            <p:inputText id="catname" value="#{CategoryMB.catName}" required="true" requiredMessage="Category must requried !" />

            <p:message for="catname" />

            <h:outputText value="Category Logo:" />

            <t:inputFileUpload storage="file" id="catImageUpload" value="#{CategoryMB.file}" style="display: inline;vertical-align: baseline;margin-bottom: 10px;"/>

            <h:message for="catImageUpload" />

            <h:outputText value="Description" />

            <p:inputTextarea id="desc" cols="10"  autoResize="false" rows="4" value="#{CategoryMB.description}"></p:inputTextarea>

            <p:message for="desc" id="descmsg" />

            <f:facet name="footer">

              <p:commandButton value="Add Category" update="growl" action="#{CategoryMB.addCategory}" icon="ui-icon-check" />

            </f:facet>
          </h:panelGrid>
        </p:panel>

        <p:growl id="growl" showDetail="true" life="5000" />

      </h:form>
    </f:view>
public void UploadImage() { 

    System.out.println("hi");

    UploadedFile myfile = getFile();

    byte[] buffer = null;

    File tempfile=null;

    if(myfile!=null)
    {
        String prefix = FilenameUtils.getBaseName(myfile.getName());
        String suffix = FilenameUtils.getExtension(myfile.getName());

        try
        {

            realPath= FacesContext.getCurrentInstance().getExternalContext().getRealPath("/Resources/CategoryImage");

            tempfile = File.createTempFile(prefix + "_", "." + suffix, new File(realPath));

            OutputStream out = new FileOutputStream(tempfile);

            InputStream in = new BufferedInputStream(myfile.getInputStream());

            this.catImage = tempfile.getName();                

            try {

                buffer = new byte[64 * 1024];

                int count;

                while ((count = in.read(buffer)) > 0)
                    out.write(buffer, 0, count);

            } finally {

                in.close();

                out.close();

            }   

            FacesContext context = FacesContext.getCurrentInstance();  

            context.addMessage(null, new FacesMessage("Successful", "Successfully added category! " + catName));  

        }
        catch(IOException e)
        {   
            e.printStackTrace();
        }   
    }

Solution

  • The <p:commandButton>, which sends by default an ajax request, doesn't support uploading files by ajax. For that you should be using <p:fileUpload mode="advanced"> instead.

    Add ajax="false" to the <p:commandButton> to turn it off.

    <p:commandButton ... ajax="false" />
    

    Note that <p:fileUpload mode="simple">, which could also be used instead of Tomahawk <t:inputFileUpload>, also requires this.


    Unrelated to the concrete problem, writing uploaded files to expanded WAR folder is a really bad idea. Reason #1 is that they all get lost whenever you redeploy the WAR or even when you restart the server, for the simple reason that they are not contained in the original WAR. Store them elsewhere in a more permanent location. See also among others this related answer: Uploaded image only available after refreshing the page.