This is a post I published in SCN, but although this example was implemented in a web page, it applies to any UI5 app / widget (without going into cross domain scenarios and such) that wants to utilize the FileUploader control so I think it may be helpful to HANA Cloud Portal app / widget designers too.
In one of our admin pages we were asked to add a file upload option.
The request was to display a small icon which will trigger the browser file upload dialog.
Since the page is all built in UI5 I obviously used the standard UI5 FileUploader.
When trying to style the control as requested I found out that it is not as easy as it sounds.
For several reasons, browsers are not quick to modify the upload file control (<input type="file"> tag) that is normally rendered as an edit field and a browse button depending on the browser family.
When you want the edit field or the button or both of them to look differently, you need to be a little creative.
There could be other ways, and there probably are many, but I believe that the way I eventually implemented this is both easy and light weight and pretty much frees you of the above mentioned constrains of the browser.
Most importantly, I used no hacks or external libraries.
Disclosure – I have not yet tested this solution on all available browsers but for late version market leaders it works.
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:
After all this I added some UI5 classes to make it look like a regular button with an icon but of course you can do whatever suits your design:
That's it. Simple and easy as promised.
Have fun.
Yaron.
Relevant links:
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
29 | |
21 | |
10 | |
7 | |
7 | |
6 | |
6 | |
5 | |
5 | |
5 |