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

shorten display name?

4 Answers 115 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 07 Feb 2012, 03:51 PM
After selecting a file for upload, is it possible to shorten the displayed filename?

So if a user selects veryveryverylongfilename.pdf, can I display

veryveryverylong...  [x remove]

but still save it as veryveryverylongfilename.pdf. I have a limited space where I have placed the control and if the filename is too long my formatting gets thrown off.



thnx

4 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 07 Feb 2012, 06:16 PM
Hello Steven,

Try the following:
<telerik:RadAsyncUpload
    OnClientFileUploaded="fileSelected" 
    ID="RadAsyncUpload1" runat="server">
</telerik:RadAsyncUpload>

<script type="text/javascript">
 
    function fileSelected(sender, args) {
        var $span = $telerik.$(".ruUploadProgress", args.get_row());
        var text = $span.text();
        if (text.length>15) {
            var newString = text.substring(0, 15) + '...';
            $span.text(newString);
        }
    }
 
</script>

 
All the best,
Bozhidar
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
Steven
Top achievements
Rank 1
answered on 07 Feb 2012, 06:30 PM
perfect,t hanks
0
Max
Top achievements
Rank 1
answered on 15 Mar 2012, 03:08 PM
Hello again,

The solution is not perfect because upload progress disappears, as it is as well contained in that newly rewritten span.

So I modified it to its true perfection :)

function FileSelected(sender, args) {
    var spanTag = document.createElement("span");
    spanTag.className = "ruFileProgressWrap";
    var spanTagInner = document.createElement("span");
    spanTagInner.className = "ruFileProgress ruProgressStarted";
    spanTag.appendChild(spanTagInner);
     
    var $span = window.$telerik.$(".ruUploadProgress", args.get_row());
    var text = $span.text();
    if (text.length > 15) {
        var newString = text.substring(0, 15) + '...';
        $span.text(newString);
        $span.append(spanTag);
    }
}


Cheers.
0
Peter
Top achievements
Rank 1
answered on 04 Oct 2013, 11:15 AM
And even further tweaked Max's solution to add a tooltip (title) for shortened files (hover over filename and full name is displayed).

function FileSelected(sender, args) {
    var spanTag = document.createElement("span");
    spanTag.className = "ruFileProgressWrap";
    var spanTagInner = document.createElement("span");
    spanTagInner.className = "ruFileProgress ruProgressStarted";
    spanTag.appendChild(spanTagInner);
     
    var $span = window.$telerik.$(".ruUploadProgress", args.get_row());
    var text = $span.text();
    if (text.length > 15) {
        var newString = text.substring(0, 15) + '...';
        $span.text(newString);
   $span.attr("title" ,text);
        $span.append(spanTag);
    }
}
Tags
AsyncUpload
Asked by
Steven
Top achievements
Rank 1
Answers by
Bozhidar
Telerik team
Steven
Top achievements
Rank 1
Max
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or