Display file type icon along with Uploadedfiles rendering

[Jane]

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?

[Shinu]

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.

[Jane]

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?

[Shinu]

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.

[Jane]

Thank you for the full solution. I copied your page and icons and then added my styles accordingly and it worked.