This is a migrated thread and some comments may be shown as answers.

Add icon

6 Answers 52 Views
Upload
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
joe castle
Top achievements
Rank 1
joe castle asked on 19 Aug 2011, 03:08 PM
Hi,

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

Thanks

6 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Tunev
Telerik team
answered on 22 Aug 2011, 11:19 AM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
joe castle
Top achievements
Rank 1
answered on 23 Aug 2011, 09:05 AM
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 
0
Courtenay
Top achievements
Rank 1
answered on 24 Aug 2011, 03:53 AM
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

 

0
Georgi Tunev
Telerik team
answered on 24 Aug 2011, 08:54 AM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
Courtenay
Top achievements
Rank 1
answered on 29 Aug 2011, 06:22 AM
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
0
Georgi Tunev
Telerik team
answered on 29 Aug 2011, 03:17 PM
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

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Tags
Upload
Asked by
joe castle
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
joe castle
Top achievements
Rank 1
Courtenay
Top achievements
Rank 1
Courtenay
Top achievements
Rank 1
Share this question
or