Hi all,
I'm not satisfied with the default af:inputFile, so I wanted to create my own button and upon clicking it, trigger the input file.
I ended up following the suggestions from this post: http://stackoverflow.com/questions/8595389/programmatically-trigger-select-file-dialog-box
and ended up with:
JSFF
<af:button text="Upload..." id="b12" actionListener="#{pageFlowScope.recordBean.uploadFileButtonClicked}" shortDesc="Upload file"/>
<af:inputFile id="inFile" autoSubmit="true" valueChangeListener="#{pageFlowScope.recordBean.uploadFileValueChangeEvent}" inlineStyle="visibility:hidden"/>
Backing Bean
public void uploadFileButtonClicked(ActionEvent actionEvent) {
FacesContext facesContext = FacesContext.getCurrentInstance();
UIComponent uploadButton = JSFUtils.findComponentInRoot("inFile");
String script = "var uploadButton = document.getElementById('" + uploadButton.getClientId(facesContext) + "::content');"
+ "uploadButton.click();";
ExtendedRenderKitService renderKit = Service.getRenderKitService(facesContext, ExtendedRenderKitService.class);
renderKit.addScript(facesContext, script);
}
which has been tested and works fine in FF 38.2 and IE 11.0.9 but does not seem to work with Chrome 44.0.2. Is this supported in Chrome? If so, what special handling do I need? Notice that I am assuming the id used for the actual input file: <af_input_file_id>::content.
I originally tried this approach outlined in this post: http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input
<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity: 0); position: relative; top: -40px;; left: -20px" />
</div>
This partially worked. Before the user uploads a file the input file UI looks like: [Browse...] No file selected. In which case, the custom button is laid right behind it and the overlap of the input file is truncated. However, after the user selects a file, the input file looks like: <filename>[update...]. Now the "update" button doesn't appear where it use to and is part of the truncated area. If the user were to click again, nothing would happen.
Which approach, in your opinion is better and safer?
I'm using JDev 12.1.3
--
Bill