Skip to Content
Author's profile photo Yaron Ganor

Hiding the SAP UI5 File Uploader behind an icon

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.

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({
         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 {

    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({

         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.


Relevant links:



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member


      How can we upload those file in MIME repository ?

      My requirement is ==>

      I have upload file in SAP-UI5, those file should upload in MIME repository (SAP-ECC)back end.

      How can i do this? 

      I have referred below link (which is shown  Gateway connection details).

      Kindly help me on this...

      Author's profile photo Yaron Ganor
      Yaron Ganor
      Blog Post Author

      Hi Akshath,

      I am not familiar with the MIME repository but I think you should just set the "uploadUrl" property to your upload service on the BE.

      If you need additional parameters you can use the "parameters" attribute.

      The uploader sends a multipart request with the file attached so your BE service should be able to consume that.

      Hope this helps...


      Author's profile photo Former Member
      Former Member

      Hi Yaron,

      I have followed below steps for both upload and download PDF! file in ECC system

      Download =>

      1. Reading MIME repository

      2. Converted Xstring data to Binary data

      3. Download using FM vice versa for upload.

      But my doubt is how can we pass this data into UI5 platform? how can i pass this data as ODATA?

      Because above steps works fine in ECC side how can i achieve in UI5 side?



      Author's profile photo Yaron Ganor
      Yaron Ganor
      Blog Post Author

      Hi Akshath,

      I am afraid what you are asking is beyond my knowledge base.

      Perhaps you should consider posting this question here: