Hiding the SAP UI5 File Uploader behind an icon

[yaron_ganor]

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.

Why

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.

How I did it

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:

1. Add the FileUploader to your layout and give it an ID and any other attributes if relevant.
   
   var myFileUploader = new sap.ui.commons.FileUploader({
        id:'myFileUploaderID',
        name:'files',
        uploadOnChange: true
   })
   
   
2. Hide your uploader.
   It is not just setting the display tag because you want to make it invisible but also un-clickable.
   For this purpose I used 2 simple CSS rules:
   
   #myFileUploaderID {
        height:0px;
        overflow:hidden;
   }
   
   No need for anything else.
   If you don’t set both these attributes, or something similar to that affect, you will get unwanted behavior like clicking in an empty area opens the upload dialog.
   
   
3. 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.
   
   

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:

Label

FileUploader