Upload image to image library using "Custom User Contro

Posted by Community Admin on 07-Nov-2011 00:00

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

Posted by Community Admin on 09-Nov-2011 00:00

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

[View:/cfs-file/__key/communityserver-discussions-components-files/295/312831_5F00_ImageSelectorUC_2D00_part2.rar:320:240]

[View:/cfs-file/__key/communityserver-discussions-components-files/295/312830_5F00_ImageSelectorUC_2D00_part1.rar:320:240]

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

Posted by Community Admin on 14-Nov-2011 00:00

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

Posted by Community Admin on 16-Nov-2011 00:00

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

Posted by Community Admin on 17-Nov-2011 00:00

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

Posted by Community Admin on 21-Nov-2011 00:00

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

This thread is closed

All Replies