RadAsyncUpload auto uploading images and display thumbnails with HighSlide

2 posts, 0 answers
  1. VnDevil
    VnDevil avatar
    58 posts
    Member since:
    Oct 2012

    Posted 13 Feb 2012 Link to this post


    RadControls version Q3 2011
    .NET version
    Visual Studio version 2010
    programming language C#
    browser support

    all browsers supported by RadControls

    This is my solution using RadAsyncUpload auto uploading images and display thumbnails with HighSlide

    First add js scripts to use on Header tag
    <script src="Scripts/jQuery/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/highslide/highslide-full.packed.js" type="text/javascript"></script>
    <script src="Scripts/highslide/highslide-full.packed.using.js" type="text/javascript"></script>
    <link href="Scripts/highslide/highslide.css" rel="stylesheet" type="text/css" />
    <link href="Scripts/highslide/highslide-ie6.css" rel="stylesheet" type="text/css" />
    <link href="Styles/css.css" rel="stylesheet" type="text/css" />

    Create file "AsyncUpload.aspx" with code
    <asp:ScriptManager runat="server" ID="ScriptManager1">
        <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                <asp:AsyncPostBackTrigger ControlID="btnUpload" />
                <asp:Button runat="server" ID="btnUpload" UseSubmitBehavior="false" ClientIDMode="Static"
                    OnClick="btnUpload_Click" Style="display: none;" />
            Auto uploading image and display thumbnails with HighSlide
            <telerik:RadAsyncUpload runat="server" ID="txtImage" OnClientFilesUploaded="onFilesUploaded"
                MaxFileInputsCount="10" MultipleFileSelection="Automatic" OnClientFileUploadRemoving="onFileUploadRemoving"

    In the code-behind
    public static bool DeleteFile(string filePath)
            if (File.Exists(HttpContext.Current.Server.MapPath(filePath)))
                return true;
            return false;
            return false;
    protected void btnUpload_Click(object sender, EventArgs e)
        if (txtImage.UploadedFiles.Count > 0)
            foreach (var file in from UploadedFile file in txtImage.UploadedFiles select file)
                var filePath = string.Format("/Uploads/{0}", file.FileName);

    Then insert js code
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function DeleteFile(filePath) {
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                url: '/AsyncUpload.aspx/DeleteFile',
                data: "{'filePath': \"" + filePath + "\"}",
                success: function (data) {
                    if (data.d) {
                        alert('Delete file successfully');
                    } else {
                        alert('Cannot delete file');
        function onFilesUploaded(sender, args) {
            var imageListContainer = $('#<%= txtImage.ClientID %>ListContainer li span.ruFileWrap');
            $('#<%= txtImage.ClientID %>ListContainer li span.ruFileWrap').each(function (index) {
                if (index < imageListContainer.length - 1) {
                    var fileName = "/Uploads/" + $(this).text();
                    $(this).append(String.format("<a href='{0}' title='' class='highslide' onclick='return hs.expand(this);'><img class='image-thumbnail' src='{0}' alt='{1}' /></a>", fileName, fileName));
        function onFileUploadRemoving(sender, args) {
            DeleteFile("/Uploads/" + args.get_fileName());

    Ok now you can run it :D Happy coding.
    You can download my code follow link below
  2. Michalis
    Michalis avatar
    3 posts
    Member since:
    Jul 2014

    Posted 16 Feb 2015 in reply to VnDevil Link to this post

    Hi VnDevil,

    Do you have any example of how can I use thumbnail for images located in Azure Blob/Container?

    Thank you,
Back to Top