Skip to Content

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:

/wp-content/uploads/2013/12/upload1_347197.png

That’s it. Simple and easy as promised.
Have fun.

Yaron.

Relevant links:

Label

FileUploader

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

    1. Yaron Ganor 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…

      Yaron

      (0) 
      1. akshath lt

        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?

        Regards,

        Akshath.L.T

        (0) 

Leave a Reply