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

Display file type icon along with Uploadedfiles rendering

4 Answers 169 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Jane
Top achievements
Rank 1
Jane asked on 12 Nov 2013, 09:03 AM
Hi

When the asyncupload displays the client uploaded filenames, is it possible to display an icon along with it? My users upload either pdf or doc/docx files, so based on file type can I show separate icons along with file name?

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 12 Nov 2013, 11:00 AM
Hi Jane,

You can attach the OnClientFileUploaded event of the RadAsyncUpload and try the following sample code I prepared for your scenario.

JavaScript:
<script type="text/javascript">
    var $ = $telerik.$;
 
    function OnClientFileUploaded(sender, args) {
        var filename = args.get_fileName();
        var type = filename.split(".")[1];
        var row = args.get_row();
        var span = $(row).find(".ruFileWrap .ruUploadProgress");
        if (type == "jpg") {
            span.text("").append("<img class='iconstyle' src='../Images/Pic1.png' />" + filename);
        }
        else if (type == "pdf") {
            span.text("").append("<img class='iconstyle' src='../Images/Pic2.png' />" + filename);
        }
    }
</script>

CSS:
<style type="text/css">
    .iconstyle
    {
        margin: 2px 5px 0px 0px;
    }
</style>

Thanks,
Shinu.
0
Jane
Top achievements
Rank 1
answered on 12 Nov 2013, 05:20 PM
Shinu

I like the attached image and want my asyncupload to work exactly like how it appears in the image. But bad luck, in my application only some portion of the image is displayed and the bottom half of the file name is cut off and there is no alignment for the row. I believe there is some sort of styling issue. How can I rectify it?
0
Accepted
Shinu
Top achievements
Rank 1
answered on 13 Nov 2013, 10:24 AM
Hi Jane,

Please try this complete solution I have prepared for your scenario and check if you can replicate any design issues. Also check whether you have added any CSS styles to the predefined CSS classes such as .ruUploadSuccess, .ruFileWrap which can interfere with the design and break the alignment of rows. Another suggestion is choose tiny images so that they can be well placed within the small space.

Hope this helps,
Shinu.
0
Jane
Top achievements
Rank 1
answered on 13 Nov 2013, 02:11 PM
Thank you for the full solution. I copied your page and icons and then added my styles accordingly and it worked.
Tags
AsyncUpload
Asked by
Jane
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Jane
Top achievements
Rank 1
Share this question
or