Hello all,
my client has a requirement of handling the choice of file upload. The use case is as follows:
The page contains the form with file input field (together with Browse button) and a submit button which will trigger the upload process. The requirement is to have this submit button disabled initially (when the page is loaded) and just after a user chooses a file (by clicking on Browse button or just by filling the field) this submit button should be enabled - then a user can click on it and start the uploading process.
I've tried to use <tt><af:inputFile></tt> together with <tt>valueChangeListener</tt> and also <tt><af:clientListener></tt> but none has worked... see below.
In example, I would like to achieve this behavior:
*0. pure HTML*
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"></meta>
<title>FileUploadInputFieldOnChange</title>
<script type="text/javascript">
function newFile()
{
alert("CHANGE!");
btn = document.getElementById("submitBtn");
btn.disabled = "";
}
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<input type="file" onchange="newFile()"/>
<input id="submitBtn" type="submit" disabled="disabled"/>
</form>
</body>
</html>
What I've tried are these two solutions:
*1. with valueChangeListener:*
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" title="FileUploadADF">
<af:form id="f1" usesUpload="true">
<af:inputFile label="What to upload: " id="if1" clientComponent="true" valueChangeListener="#{FileUploadBean.fileInputChanged}"/>
<af:commandButton text="Start upload" id="cb1" disabled="true"/>
</af:form>
</af:document>
</f:view>
</jsp:root>
with bean
package sk.oracle.fu.beans;
import javax.faces.event.ValueChangeEvent;
public class FileUploadBean
{
public FileUploadBean()
{
}
public void fileInputChanged(ValueChangeEvent valueChangeEvent)
{
System.out.println("!!! CHANGED!");
// other code for manipulating the button
}
}
In this case the method in bean is just not called.
*2. with <clientListener>:*
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document id="d1" title="FileUploadADF">
<af:form id="f1" usesUpload="true">
<af:resource type="javascript">
function inputFileChanged()
{
alert("CHANGED!");
}
</af:resource>
<af:inputFile label="What to upload: " id="if1" clientComponent="true">
<af:clientListener method="inputFileChanged()" type="valueChange"/>
</af:inputFile>
<af:commandButton text="Start upload" id="cb1" disabled="true"/>
</af:form>
</af:document>
</f:view>
</jsp:root>
With this solution, the Javascript is called once when the page is loaded (as it would be 'onload' event), but when the filename input field is changed, it is not called anymore.
What am I doing wrong?
Thank you in advance.
Regards,
Rox
Edited by: roxolid on May 10, 2012 1:19 PM - the original post was empty for unknow reason