Hi,
In order to comply with community guidelines I summarized the post to very small points.
You can see the full solution in the post I published in the HCP blog a few weeks ago.
Why
When trying to style the control as requested I found out that it is not as easy as it sounds.
When you want the edit field or the button or both of them to look differently, you need to be a little creative.
How I did it
And to the point, what I did is, after adding the FileUploader and hiding it in plain sight, I created a UI5 label, styled it to my desire and used the "labelFor" attribute to trigger the upload action.
Here are the snips:
- Add the FileUploader to your layout and give it an ID and any other attributes if relevant.
- Hide your uploader with CSS.
- Add the Label to your layout.
var myFileUploadLabel = new sap.ui.commons.Label({
id:'myFileUploadLabelID',
labelFor:'myFileUploaderID-fu',
icon:'myIcon.png',
tooltip:'My Custom Upload Label'})
And now here is the trick, notice that in the "labelFor" attribute, I put the ID I used for the FileUploader followed by "–fu".If you drill down into the FileUploader you will see that this is the automatically generated ID for its <input type="file"> tag.
The full post can be found here .
Have fun.
Yaron.
Relevant links:
Label
FileUploader
