Attempting to customize the t:inputFileUpload element, a solution was tried from styling an input type=file. This involves adding another input element and image to occupy the same space as the t:inputFileUpload. Below is the code snippet:
<div id="file-div">
<h:inputText styleClass="replace-upload" id="fake-input" />
<div class="browse-img">
<span class="browse-button">#{msgs.select}</span>
</div>
<t:inputFileUpload id="file" value="#{createListBean.uploadedFile}"
size="22" accept=".xls,.xlsx,.csv" type="file" style="z-index :2;opacity:0;position:relative;"
onchange="changeFakeFile()" styleClass="file-real" />
</div>
The styling included in the implementation:
.replace-upload {
border: 1px solid #EEEEEE !important;
border-radius: 3px 3px 3px 3px !important;
box-shadow: 2px 2px 0 0 #CCCCCC inset !important;
color: #333333 !important;
font-size: 14px !important;
margin-top: -5px;
padding: 5px !important;
width: 157px !important;
position: absolute;
z-index: 1;
}
.browse-img {
background-color: #333333;
color: #FFFFFF;
width: 76px;
position: absolute;
left: 171px;
top:-2px;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 1px #000000;
}
.browse-button {
color:#FFFFFF;
cursor: pointer;
display: block;
font-size: 12px;
font-weight: bold;
line-height: normal;
padding: 5px 18px;
text-decoration: none;
}
When the user clicks on the fake input element, they are actually interacting with the tomahawk element. However, the selected file path does not appear over the fake input. To address this issue, JavaScript function was added:
changeFakeFile(){
var x = $('.file-real').val();
$('.replace-upload').text(x);}
The problem arises when the fake input value changes but does not show to the user. Any suggestions on making it visible?