Question

I have an h:inputText and a rich:fileUpload. I’d like the inputText to, when click, invoke the fileUpload. How would I go about doing this? Right now, I have this:

<h:inputText id="uploadName" maxlength="255" value="#{bean.fileName}" required="false"
                                    onclick="INVOKE FILEUPLOAD"
                                    >
                                        </h:inputText>                                  
                                        <rich:fileUpload id="uploadFile" addControlLabel="Upload"
                                            fileUploadListener="#{bean.fileUploadListener}"
                                            uploadData="#{bean.data}"
                                            listWidth="100px" listHeight="0px" maxFilesQuantity="1"
                                            immediateUpload="true" acceptedTypes="xml" allowFlash="false"
                                            status="eventQueueFileUpload">

                                        </rich:fileUpload>

Essentially, I want the inputText and the fileUpload to have the same function, I would just show the filename in the inputText.

Thanks for the help

Answer 1

You can’t force a browser to trigger a file upload. What you can do is use CSS tricks to position the file input over the text input and make it transparent. Then it looks like you’ve got an input field (and note you don’t really even need it to be a text input; it can just be a <span>, since you need the form to contain the parameter value from the file input itself anyway).

It’s not super-hard to make this work for decent browsers, but it can be a minor pain for IE. IE7 lets people type into the file input, which you probably don’t want. Everything else will launch the file browser dialog when the input is clicked anywhere.