+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Upload image to image library using "Custom User Control"

Upload image to image library using "Custom User Control"

6 posts, 2 answered
  1. gopalraman gopal
    gopalraman gopal avatar
    52 posts
    Registered:
    03 Dec 2009
    07 Nov 2011
    Link to this post
    Hi,

    I want to upload a image to image library from custom user control. Is it possible?

    If it is possible, how to add the control in .ascx file?

    Thanks
  2. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    09 Nov 2011
    Link to this post
    Hi Gopalraman,

    I have attached a project with such control implemented. To access the site use admin/password for credentials.

    Greetings,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  3. gopalraman gopal
    gopalraman gopal avatar
    52 posts
    Registered:
    03 Dec 2009
    14 Nov 2011
    Link to this post
    Hi Stanislav Velikov ,

    Thanks for your reply. Its working perfect. I have some couple of questions on it.

    1. Is it possible to open the Predefined "Image Library" images in popup RadWindow? Instead of showing all "Image Library" ?

    2.  Like the same can we able to open the "Document Library" in the user control? If it is possible can you explain how to do?



    Thanks
  4. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    16 Nov 2011
    Link to this post
    Hi Gopalraman,

    1. To select the specific image library made modifications to the code:
    ImageSelectorDialog.cs
    using System;
    using System.Collections.Generic;
    using System.Web.UI;
    using Telerik.Sitefinity.Web.UI;
    using System.Linq;
    using System.Web.UI.WebControls;
    using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;
    using Telerik.Sitefinity.Localization;
    using Telerik.Sitefinity.Modules.Libraries.Images;
      
    namespace Modules.Competition.Controls
    {
        /// <summary>
        /// A simple dialog used to select an image. This dialog uses the SimpleImageSelector control
        /// </summary>
        public class ImageSelectorDialog : AjaxDialogBase
        {
            #region Properties
      
            /// <summary>
            /// Gets the name of the layout template.
            /// </summary>
            /// <value>The name of the layout template.</value>
            protected override string LayoutTemplateName
            {
                get
                {
                    return String.Empty;
                }
            }
      
            public override string LayoutTemplatePath
            {
                get
                {
                    return "~/Ctrls/Modules.Competition.Resources.Views.ImageSelectorDialog.ascx";
                }
                set
                {
                    base.LayoutTemplatePath = value;
                }
            }
      
            protected virtual EditorContentManagerDialog AsyncImageSelector
            {
                get
                {
                    return this.Container.GetControl<EditorContentManagerDialog>("asyncImageSelector", true);
                }
            }
      
            #endregion
      
            #region Methods
      
            /// <summary>
            /// Initializes the controls.
            /// </summary>
            /// <param name="container">The container.</param>
            protected override void InitializeControls(GenericContainer container)
            {
                  
            }
      
            #endregion
      
            #region IScriptControl Members
      
            /// <summary>
            /// Gets the script references.
            /// </summary>
            /// <returns></returns>
            public override IEnumerable<ScriptReference> GetScriptReferences()
            {
                var references = new List<ScriptReference>(base.GetScriptReferences());
                var newRef = new ScriptReference(simpleImageSelectorDialogScript, this.GetType().Assembly.FullName);
                references.Add(newRef);
                return references;
            }
      
            /// <summary>
            /// Gets the script descriptors.
            /// </summary>
            /// <returns></returns>
            public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
            {
                var descriptor = (ScriptControlDescriptor)base.GetScriptDescriptors().Last();
                descriptor.Type = this.GetType().FullName;
                //var newDescriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);
      
                descriptor.AddComponentProperty("asyncImageSelector", this.AsyncImageSelector.ClientID);
                //baseDescriptors.Add(newDescriptor);
                return new[] { descriptor };
            }
      
            #endregion
      
            #region Private Fields
      
            private const string simpleImageSelectorDialogScript = "Modules.Competition.Resources.Scripts.ImageSelectorDialog.js";
      
            #endregion
        }
    }

    ImageSelectorDialog.js
    Type.registerNamespace("Modules.Competition.Controls");
      
    Modules.Competition.Controls.ImageSelectorDialog = function (element) {
      
        Modules.Competition.Controls.ImageSelectorDialog.initializeBase(this, [element]);
        this._asyncImageSelector = null;
        this._asyncImageSelectorInsertDelegate = null;
      
    }
      
    Modules.Competition.Controls.ImageSelectorDialog.prototype =
    {
        initialize: function () {
            Modules.Competition.Controls.ImageSelectorDialog.callBaseMethod(this, "initialize");
            //        this._asyncImageSelector.get_selectorView().
            //        get_mediaContentBinder()
            //        .set_filterExpression(query)
      
      
      
            this._asyncImageSelectorInsertDelegate = Function.createDelegate(this, this._asyncImageSelectorInsertHandler);
            this._asyncImageSelector.set_customInsertDelegate(this._asyncImageSelectorInsertDelegate);
      
            this._loadDelegate = Function.createDelegate(this, this._load);
            Sys.Application.add_load(this._loadDelegate);
      
            dialogBase.resizeToContent();
        },
      
        _load: function () {
            var key = "B6F45EE2-45C8-4BB6-8AC6-358B110BBDA2"; //ID of the album you want to show
            var filter = "Id=(" + key + ")";
            this._asyncImageSelector.get_selectorView().get_libraryBinder().set_filterExpression(filter);
            //        var urlParams = []
            //        urlParams["ParentId"] = "B6F45EE2-45C8-4BB6-8AC6-358B110BBDA2";
            //        this._asyncImageSelector.get_selectorView().get_libraryBinder().set_urlParams(urlParams);
        },
      
        dispose: function () {
            Modules.Competition.Controls.ImageSelectorDialog.callBaseMethod(this, "dispose");
            //todo remove load delegate
        },
      
        /* --------------------  public methods ----------- */
      
        /* -------------------- events -------------------- */
      
        /* -------------------- event handlers ------------ */
        _asyncImageSelectorInsertHandler: function (selectedItem) {
            if (selectedItem) {
                //            this.get_imageElement().src = selectedItem.ThumbnailUrl;
                //            this._selectedImageItem = selectedItem;
                dialogBase.close(selectedItem);
            }
        },
      
      
        /* -------------------- private methods ----------- */
      
      
        /* -------------------- properties ---------------- */
      
        get_asyncImageSelector: function () {
            return this._asyncImageSelector;
        },
      
        set_asyncImageSelector: function (value) {
            this._asyncImageSelector = value;
        }
    };
      
    Modules.Competition.Controls.ImageSelectorDialog.registerClass("Modules.Competition.Controls.ImageSelectorDialog", Telerik.Sitefinity.Web.UI.AjaxDialogBase);
    To get the Library ID go to the database table sf_libraries.
    In the dialog will be displayed All items and the library with the specified ID. All items are automatically added.

    2. In ImageSelectorDialog.ascx set DialogMode="Document" you have options for video too.


    Regards,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
    Answered
  5. gopalraman gopal
    gopalraman gopal avatar
    52 posts
    Registered:
    03 Dec 2009
    17 Nov 2011
    Link to this post
    Hi Stanislav Velikov,

    Thanks Stanislav Velikov in adavance.

    1. Is it possible to open the Predefined "Image Library" images in popup RadWindow? Instead of showing all "Image Library" ?

    From your reply, i am getting "All items" also in the list. Is there any way to remove or hide "all items" ?

    2.  Like the same can we able to open the "Document Library" in the user control? If it is possible can you explain how to do?


    From your reply, i can able to change the "image library" into "document library", in this case all "image library" has been changed to "document library" but for my case both "image and document" selector has to be used on my "Custom Control". Is there any way we can do this?

    I am waiting for your fast reply.

    Thanks
  6. Stanislav Velikov
    Stanislav Velikov avatar
    1113 posts
    Registered:
    08 Dec 2016
    21 Nov 2011
    Link to this post
    Hello Gopalraman,

    1. With my tests this settings modified the javascript to show the selected library by ID (the default library was also shown, but removing it requires additional implementation since it is in a different list).

    2. Yes it is possible to reuse the whole widget implementation in custom control. For the purpose create a basic custom control (if you are not familiar here is tutorial, also there is a ready sample in Sitefinity SDK).
    The control functions in the following way:

    There is a button that calls the dialog to open (the dialog is a popup with image selector). The button is calling RadWindow to open.
    <telerik:RadWindowManager ID="windowManager" runat="server" Skin="Sitefinity">
                                                   <Windows>
                                                       <telerik:RadWindow ID="simpleImageSelector" Width="600" Height="400" NavigateUrl="~/Sitefinity/Dialog/ImageSelectorDialog" runat="server" ReloadOnShow="true"
                                                           Modal="true" VisibleStatusbar="false" Behaviors="Close" OnClientClose="windowClose" OpenerElementID="selectBtn" >
                                                       </telerik:RadWindow>
                                                   </Windows>
                                               </telerik:RadWindowManager>
    The RadWindow calls a template for image selector:
    <sf:EditorContentManagerDialog runat="server" ID="asyncImageSelector" DialogMode="Image" Width="540" HostedInRadWindow="true"  BodyCssClass="" />
        <sfFields:FormManager id="formManager" runat="server"/>
    There is a code file .cs that manages the template and client component .js that provides the dialog functionality.

    With custom control you can set the dialog to open in control designer when editing the control in page edit mode to select an image and display it in the frontend or displays the dialog to the user so uploading images can be done.

    Best wishes,
    Stanislav Velikov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
6 posts, 2 answered