Display file type icon along with Uploadedfiles rendering

5 posts, 1 answers
  1. Jane
    Jane avatar
    13 posts
    Member since:
    Aug 2013

    Posted 12 Nov 2013 Link to this post

    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?
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Nov 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jane
    Jane avatar
    13 posts
    Member since:
    Aug 2013

    Posted 12 Nov 2013 Link to this post

    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?
  5. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Nov 2013 Link to this post

    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.
  6. Jane
    Jane avatar
    13 posts
    Member since:
    Aug 2013

    Posted 13 Nov 2013 Link to this post

    Thank you for the full solution. I copied your page and icons and then added my styles accordingly and it worked.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017