JSF Load Component: Alternate Start
I have a JSF form that needs to upload a file using an icon click (i.e. without showing the textbox / view button of the file upload component).
Is it possible to initiate a file open dialog and load the functions of the download component through some other type of component?
I don't think there is another "off the shelf" component that you could use to trigger the file open dialog (which is, after all, the output <input type=file>
written by the renderer).
However, if you are ready to develop your own renderer, it can write both an <input>
icon <img>
(one by one). Give <input>
a css class that uses absolute positioning to position it on top <img>
and reduce its opacity to 0 (you can also set the cursor to "pointer").
Now, when the user clicks on the icon, they also click on invisible input, which brings up your dialog.
(Now that I think about it, I'm pretty sure you can do this without writing your own renderer, just by applying the same type of css to the shelf components ...)
source to share
As of HTML5, there is a new way to style CSS with bootstrap, for example and replace the image with a glyphicon.
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
filter: alpha(opacity=0);
opacity: 0;
outline: none;
cursor: inherit;
display: block;
width:32px;
font-size:24pt;
height:12px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<form>
<span class="btn btn-default btn-file btn-lg">
<span class="glyphicon glyphicon-upload"> </span> <input type="file">
</span>
</form>
</body>
</html>
source to share