Open file browse panel of p:fileUpload on click of an image

Question

Is there any way to fire the basic <p:fileUpload> button (the one that shows a panel to select a file) on click of an image?

For simple html + css, Write the code in a modal.. – user388229 Apr 16 '16 at 17:32 — user388229, Apr 16 '16 at 17:32
When exactly do you want to open it then? On page load? – BalusC Apr 16 '16 at 19:34 — BalusC, Apr 16 '16 at 19:34
onClicking on some picture – Malek Yahyaoui Apr 16 '16 at 21:27 — Malek Yahyaoui, Apr 16 '16 at 21:27

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Just put the image in a label referring the input field.

<h:form>
    <p:fileUpload id="file" mode="simple" ... />
    <h:outputLabel for="file">
        <p:graphicImage name="images/pic.png" />
    </h:outputLabel>
</h:form>

Do note that this works even if the input is hidden by CSS.

Open file browse panel of p:fileUpload on click of an image

1 Answers1

See also: