Tomahawk inputFileUpload tag

File uploading is the concept of uploading the file to the server. The component for this purpose is created using <t:inputFileUpload> tag. Do remember to include "enctype" attribute in the form tag and set to "multipart/form-data". You must enable the MultiPart Filter to make the component work. For this you have to add the code below in the web.xml file.

<filter>
    <filter-name>extensionsFilter</filter-name>
        <filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>
        <init-param>
                <description>Set the size limit for uploaded files.
                       Format: 10 - 10 bytes
                      10k - 10 KB
                      10m - 10 MB
                      1g - 1 GB
                </description>
                <param-name>uploadMaxFileSize</param-name>
                <param-value>100m</param-value>
        </init-param>
        <init-param>
                <description>Set the threshold size - files below this limit are stored
			     in memory, files above this limit are stored on disk.
                         Format: 10 - 10 bytes
                         10k - 10 KB
                         10m - 10 MB
                         1g - 1 GB
                 </description>
                 <param-name>uploadThresholdSize</param-name>
                 <param-value>100k</param-value>
         </init-param>
</filter>

<filter-mapping>
         <filter-name>extensionsFilter</filter-name>
         <url-pattern>*.jsf</url-pattern>
</filter-mapping>

<filter-mapping>
          <filter-name>extensionsFilter</filter-name>
          <url-pattern>/faces/*</url-pattern>
</filter-mapping>

Code Description : In this code we have used inputFileUpload tag to create this file upload component. We have also created a button that when clicked, causes a method upload() of the backing bean(FileUploadForm.java) to be called. In this code, the output text for showing success and failure is rendered based on the condition of success / failure in uploading the file. For this rendered attribute has been used.

<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>
<html>
<head>
<title>t:inputFileUpload example</title>
</head>
<body>
<f:view>
  <h:form id="welcomeForm" enctype="multipart/form-data">
    <t:inputFileUpload id="fileupload" value="#{FileUploadForm.upFile}"
			 size="20" /><p/>
    <h:commandButton value="Load the file" action="#{FileUploadForm.upload}" />
    <t:outputText value="File Uploaded Successfully." 
		rendered="#{FileUploadForm.rendSuccess}" 
		style="color:green;font-weight:bold"/>
    <t:outputText value="Error in File Uploading." 
		rendered="#{FileUploadForm.rendFailure}" 
		style="color:red;font-weight:bold"/>
  </h:form>
</f:view>
</body>
</html>


package net.roseindia.web.ui;



import java.io.*;

import javax.servlet.http.*;

import org.apache.myfaces.custom.fileupload.UploadedFile;

import javax.faces.context.FacesContext;



public class FileUploadForm{

    private UploadedFile upFile;

     boolean rendSuccess=false;

  boolean rendFailure=false;

  

  public FileUploadForm(){

  }



    public UploadedFile getUpFile(){

        return upFile;

    }



    public void setUpFile(UploadedFile upFile){

        this.upFile = upFile;

    }



  public boolean getRendSuccess(){

        return rendSuccess;

    }

  

  public void setRendSuccess(boolean rendSuccess){

        this.rendSuccess = rendSuccess;

    }



  public boolean getRendFailure(){

        return rendFailure;

    }

  

  public void setRendFailure(boolean rendFailure){

        this.rendFailure = rendFailure;

    }



    public String upload() throws IOException{

    try {

      InputStream stream = upFile.getInputStream();

      long size = upFile.getSize();

      byte [] buffer = new byte[(int)size];

      stream.read(buffer, 0, (int)size);

      stream.close();

      rendSuccess=true;

      rendFailure=false;

      System.out.println("File Upload Successful.");

      return "ok";

    }

    catch (Exception ioe) {

      System.out.println("File Upload Unsuccessful.");

      rendSuccess=false;

      rendFailure=true;

      return "no";

        }

  }

}

Rendered Output : This is the output of the above code. The file upload component is the combination of an input box and a button for choosing a file to be uploaded.

The following figure appears when there is any problem in uploading a chosen file.

<html>
<head>
<title>t:inputFileUpload example</title>
</head>
<body>
<form id="welcomeForm" name="welcomeForm" method="post" 
	action="/tomahawk_tags/pages/inputFileUpload.jsf" 
	enctype="multipart/form-data">
<input type="file" id="welcomeForm:fileupload" 
	name="welcomeForm:fileupload" size="20" /><p/>
<input id="welcomeForm:_idJsp0" name="welcomeForm:_idJsp0" 
	type="submit" value="Load the file" 
	onclick="if(typeof window.clearFormHiddenParams_
	welcomeForm!='undefined'){clearFormHiddenParams_
	welcomeForm('welcomeForm');}" />
<input type="hidden" name="welcomeForm_SUBMIT" value="1" />
<input type="hidden" name="welcomeForm:_idcl" />
<input type="hidden" name="welcomeForm:_link_hidden_" />
<script type="text/javascript"><!--
	function clear_welcomeForm()
	{
		clearFormHiddenParams_welcomeForm('welcomeForm');
	}
	
	function clearFormHiddenParams_welcomeForm(currFormName)
	{
		var f = document.forms['welcomeForm'];
		f.elements['welcomeForm:_idcl'].value='';
		f.elements['welcomeForm:_link_hidden_'].value='';
		f.target='';
	}	
	clearFormHiddenParams_welcomeForm();
//--></script><input type="hidden" name="javax.faces.ViewState" 
id="javax.faces.ViewState" value="rO0ABXVyABNbTGphdmEubGFuZy5PYmpl
Y3Q7kM5YnxBzKWwCAAB4cAAAAANzcgBHb3JnLmFwYWNoZS5teWZhY2VzLmFwcGxpY2
F0aW9uLlRyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25lbnRGWRfY
nEr2zwIABFsACV9jaGlsZHJlbnQASltMb3JnL2FwYWNoZS9teWZhY2VzL2FwcGxpY2
F0aW9uL1RyZWVTdHJ1Y3R1cmVNYW5hZ2VyJFRyZWVTdHJ1Y3RDb21wb25lbnQ7
..............
.............." />
</form>
<!-- MYFACES JAVASCRIPT -->
</body>
</html>