RadAsyncUpload auto uploading images and display thumbnails with HighSlide

Thread is closed for posting
2 posts, 0 answers
  1. 566D00B0-8652-483D-AB15-09B72B8B4E0D
    566D00B0-8652-483D-AB15-09B72B8B4E0D avatar
    60 posts
    Member since:
    Oct 2012

    Posted 13 Feb 2012 Link to this post

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

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    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:ScriptManager>
        <asp:UpdatePanel runat="server" ID="UpdatePanel1">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnUpload" />
            </Triggers>
            <ContentTemplate>
                <asp:Button runat="server" ID="btnUpload" UseSubmitBehavior="false" ClientIDMode="Static"
                    OnClick="btnUpload_Click" Style="display: none;" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <h2>
            Auto uploading image and display thumbnails with HighSlide
        </h2>
        <p>
            <telerik:RadAsyncUpload runat="server" ID="txtImage" OnClientFilesUploaded="onFilesUploaded"
                MaxFileInputsCount="10" MultipleFileSelection="Automatic" OnClientFileUploadRemoving="onFileUploadRemoving"
                AllowedFileExtensions="jpg,png,jpeg,gif">
            </telerik:RadAsyncUpload>
        </p>

    In the code-behind
    [WebMethod]
    public static bool DeleteFile(string filePath)
    {
        try
        {
            if (File.Exists(HttpContext.Current.Server.MapPath(filePath)))
            {
                File.Delete(HttpContext.Current.Server.MapPath(filePath));
                return true;
            }
            return false;
        }
        catch
        {
            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);
                file.SaveAs(Server.MapPath(filePath));
            }
        }
    }

    Then insert js code
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
     
        function DeleteFile(filePath) {
            $.ajax({
                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) {
            $('#btnUpload').click();
     
            var imageListContainer = $('#<%= txtImage.ClientID %>ListContainer li span.ruFileWrap');
            $('#<%= txtImage.ClientID %>ListContainer li span.ruFileWrap').each(function (index) {
                if (index < imageListContainer.length - 1) {
                    //alert($(this).children(".ruUploadSuccess").html());
     
                    var fileName = "/Uploads/" + $(this).text();
     
                    $(this).addClass('temp_ruFileWrap');
                    $(this).children(".ruUploadSuccess").addClass('temp_ruUploadSuccess');
                    $(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));
     
                    $(this).children(".ruUploadSuccess").text('');
                }
            });
        }
     
        function onFileUploadRemoving(sender, args) {
            DeleteFile("/Uploads/" + args.get_fileName());
        }
    </script>
    </telerik:RadCodeBlock>


    Ok now you can run it :D Happy coding.
    You can download my code follow link below
    http://www.mediafire.com/?39oi5bqp4by3tpx
  3. B29FDFF5-FA30-48AA-9B8B-F069F669586A
    B29FDFF5-FA30-48AA-9B8B-F069F669586A avatar
    3 posts
    Member since:
    Jul 2014

    Posted 16 Feb 2015 in reply to 566D00B0-8652-483D-AB15-09B72B8B4E0D 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,
    Mike 
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.