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

    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
  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,
    Mike 
Back to Top