Add icon

[joe castle]

Hi,

Is it possible to add an icon to the upload button (Razor)?

Thanks

[Georgi Tunev]

Hello Joe,

Yes, it is possible by styling the span with the button text. For example:

.t-upload-button span
{
    padding-left:20px;
    background-image:url('someImage.png');
}

note: adjust the size of the padding and/or the image accordingly.

All the best,
Georgi Tunev
the Telerik team

[joe castle]

Hi Georgi,

Thank you, I got my icon on the button although I had to add the no-repeat too:

.t-upload-button span
{
  padding-left:20px;
  background-image:url('someImage.png');
  background-repeat:no-repeat;
}

Thanks 

[Courtenay]

Dear Telerik
That appears to be partly the answer - as the word "Select..." still appears.

So what I ideally like is just to put an icon in without the word select appears.

However I use the following code

function AssignTextToUploadControl() {
        var obj = $('#attachments').data("tUpload");

        if (obj != null) {
            if (obj.wrapper[0] != null) {
                obj.wrapper[0].innerText = "";
}
}

 

This makes the "Select..." word disappear but the image does not appear.

Is there a way to use JQuery/Javascript to call you functionality so as to mimic the press of the
word Select

 

[Georgi Tunev]

Hello Courtenay,

The original question was about adding an icon, not replacing the text with one :)
As for your scenario, you can replace the text with an icon either by CSS, or with client code. Here is how to do it:

CSS only:

.t-upload-button span
{
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url('Content/file-upload.png');
    background-repeat: no-repeat;
    text-indent: -9999px;
    overflow: hidden;
}

jQuery
In your code, you get a reference to the MVC object, while you need the SPAN in the rendered HTML. To get, it, the easiest way will be to add a new HTML attribute to the upload and then use it to find the SPAN.
e.g.

@{Html.Telerik().Upload()
        .Name("attachments")
        .HtmlAttributes(new { id = "attachments-wrapper" })
        .Async(async => async
            .Save("Save", "Home")
        )
        .Render();
}

Once you can reference the HTML wrapper, you can find its first SPAN element and set it text to an empty string:

$("#attachments-wrapper").find('span:first').text("");

Greetings,
Georgi Tunev
the Telerik team

[Courtenay]

Dear George

The answer you provide partly works. If you press the icon and select an file to upload, the icon disappears to be replaced with the
input of type file

Yours sincerely
Courtenay

[Georgi Tunev]

Hi again Courtenay,

I assume you went for the jQuery approach - I was able to reproduce the problem with it only (the CSS approach works fine).
The reason for the problem in this case is that I used ID as a custom HTML attribute, which leads to problems when the component is recreated - I apologize for that. If you still want to use the jQuery approach, you could for example add a custom CSS class to the component and then to search by it.
e.g.
.HtmlAttributes(new { @class = "myCustomClass" })

and in the JS code:
$(".myCustomClass").find('span:first').text("");



All the best,
Georgi Tunev
the Telerik team