Apex Code Development You need to sign in to do that
Don't have an account?
Alexis Rodriguez Binding an inputfile to a button in a VisualForce page
Hi,
As the inputFile component cannot be customized in visualForce, I have implemented a binding to a custom button and hidden the original inputFile.
When I click on the button I trigger the click event on the inputFile.
Here is my VF page:
It worked like a charm in Firefox and Chrome, however in ie8, when the file is picked after clicking on the custom button, everytime the commandButton is clicked, the value of the inputFile is cleared, and the page doesn't postback.
So I'm wondering whether there is a workaround to fix the behavior in ie8.
Thx.
As the inputFile component cannot be customized in visualForce, I have implemented a binding to a custom button and hidden the original inputFile.
When I click on the button I trigger the click event on the inputFile.
Here is my VF page:
<apex:form >
<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
var fileinput = document.getElementById("{!$Component.SnapshotInputfile}");
fileinput.click();
}
function Handlechange()
{
var fileinput = document.getElementById("{!$Component.SnapshotInputfile}");
var textinput = document.getElementById("filename");
textinput.innerHTML = fileinput.value;
}
</script>
<apex:inputfile id="SnapshotInputfile" value="{!snapshot_attachment.body}" onChange="Handlechange();" accept="image/*" filename="{!snapshot_attachment.Name}">
</apex:inputfile>
<label id="filename" readonly="true"/>
<input type="button" value="select" id="fakeBrowse" onclick="HandleBrowseClick();" class="btn"/>
<apex:commandButton id="uploadButton" action="{!UploadPicture}" value="upload"/>
</apex:form>
So I have a commandButton that will post the file to the server, where in the controller I create an attachment with the file.It worked like a charm in Firefox and Chrome, however in ie8, when the file is picked after clicking on the custom button, everytime the commandButton is clicked, the value of the inputFile is cleared, and the page doesn't postback.
So I'm wondering whether there is a workaround to fix the behavior in ie8.
Thx.
http://blog.jeffdouglas.com/2010/04/28/uploading-an-attachment-using-visualforce-and-a-custom-controller/
http://corycowgill.blogspot.in/2011/01/i-see-lot-of-folks-posting-questions-in.html
I know that very well. However the reason why I used the custom button and the script is that I needed to customize the button, which is not possible with the button of the input file (one way to customize it involves the use of an image for the button but I don't wanna do that because I am using custom labels for the value of the button).
I think the issue is related to the "on change" javascript event on IE8 for file inputs.
In IE8 the javascript "on change" event will not be triggered on file inputs in IE versions earlier to IE9.
So I guess that's why your file name field stay empty.
You can verify by debugging the javascript method "Handlechange()" (using an alert or anything...) to check if in IE8 the method is really called.
I suggest you to handle the "change" event using jquery (with a version > 1.4.2) instead of handling it directly with "onChange" attribute on apex:inputfile tag.
With a recent version of jquery your code will support the change event properly without taking care of browsers specificities.
Otherwise... If you don't want to use jquery you can find easily many alternative on the web, like this one (suggesting to add a onFocus method to detect when the file dialog is closed and focus came back to the file input): http://stackoverflow.com/questions/7181333/what-is-the-workaround-for-onchange-with-file-inputs
Thx for your reply.
I would like just to mention that strangely the onChange event is indeed working in ie8 (handlechange is executing and the label filename is indeed being updated).
The problem that I'm facing is that when I click on the commandButton (upload), the inputFile is clearing and the page is not posted back.
I don't think that it has something to do with the onChange event.