Image Uploader in Control Designer

I am trying to add an image uploader and selector to a Control Designer for a custom widget i've built following this tutorial:

www.sitefinity.com/.../sitefinity-essentials-controls-working-with-control-designers-creating-a-simple-control-designers.html

I have the selector in there fine, but I don't know how to add an uploader so that any images uploaded go into the library.  The media selector works great using this code:

    <sf:MediaContentSelectorView
        id="selectorView"
        runat="server"
        ContentType="Telerik.Sitefinity.Libraries.Model.Image"
        ParentType="Telerik.Sitefinity.Libraries.Model.Album"
        LibraryBinderServiceUrl="~/Sitefinity/Services/Content/AlbumService.svc/"
        MediaContentBinderServiceUrl="~/Sitefinity/Services/Content/ImageService.svc/"
        MediaContentItemsListDescriptionTemplate="Telerik.Sitefinity.Resources.Templates.Designers.Libraries.Images.ImageItemDescriptionTemplate.htm"
        DisplayResizingOptionsControl="false"
        ShowOpenOriginalSizeCheckBox="false">
    </sf:MediaContentSelectorView>


I tried something similar using the MediaContentUploaderView but keep getting errors.  Is this the right control and is there an example of how to use it somewhere?  I get object reference errors using the code below:



    <sf:MediaContentUploaderView ID="Foo2" runat="server"  LibraryName="Default"   ContentType="Telerik.Sitefinity.Libraries.Model.Image"     ParentType="Telerik.Sitefinity.Libraries.Model.Album"   >
        <LayoutTemplate>   
            <sf:TextField runat=server ID="altTextField" >
                <LayoutTemplate></LayoutTemplate>
            </sf:TextField>
            <sf:TextField runat=server ID="titleTextField" >
                <LayoutTemplate></LayoutTemplate>
            </sf:TextField>
            <sf:ResizingOptionsControl runat="server" ID="resizingOptionsControl">
                <LayoutTemplate></LayoutTemplate>
            </sf:ResizingOptionsControl>
            <asp:TextBox runat="server" ID="whichItemToUploadLabel"></asp:TextBox>            
        </LayoutTemplate>        
    </sf:MediaContentUploaderView>

Object reference not set to an instance of an object.

[NullReferenceException: Object reference not set to an instance of an object.]
   Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentUploaderView.InitializeControls(GenericContainer container) +242
   Telerik.Sitefinity.Web.UI.SimpleView.CreateChildControls() +58
   System.Web.UI.Control.EnsureChildControls() +102
   System.Web.UI.Control.PreRenderRecursiveInternal() +42
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496

Hi fregas,

Please take a look at this forum post.

Greetings,
Ivan Dimitrov
the Telerik team

Do you have a code example somewhere for this?  I'm just getting errors such as:

I used the thread you posted and set the properties for the uploader, but to no avail. 

A required control was not found in the template for "". The control must be assignable form type "System.Web.UI.ITextControl" and must have ID "librarySelectorTitle".

[TemplateException: A required control was not found in the template for "". The control must be assignable form type "System.Web.UI.ITextControl" and must have ID "librarySelectorTitle".]
   Telerik.Sitefinity.Web.UI.GenericContainer.ThrowException(Type requiredType, String controlId) +58
   Telerik.Sitefinity.Web.UI.GenericContainer.GetControl(String id, Boolean required) +212
   Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentUploaderView.get_LibrarySelectorTitle() +42
   Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers.MediaContentUploaderView.InitializeControls(GenericContainer container) +296
   Telerik.Sitefinity.Web.UI.SimpleView.CreateChildControls() +58
   System.Web.UI.Control.EnsureChildControls() +102
   System.Web.UI.Control.PreRenderRecursiveInternal() +42
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Control.PreRenderRecursiveInternal() +175
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2496

Hi fregas ,

The code sample is inside the form post I gave you. In the template you should declare

<sf:MediaContentUploaderView id="uploaderView" runat="server"></sf:MediaContentUploaderView>

There is a label control

<asp:Label ID="librarySelectorTitle" runat="server" CssClass="sfTxtLbl" AssociatedControlID="librariesDropDown" />

which is declared in the uploader template as embedded resource.

What are the steps for replicating the error you are getting?

Regards,
Ivan Dimitrov
the Telerik team

I tried the code you sent me but it gave me the error i sent you.  Heres the code for the widget's designer files i'm working on.  Let me know if you need the widget code too. 

Hi fregas,

Unfortunately, I am not able to replicate this issue with the latest official release.

All the best,
Ivan Dimitrov
the Telerik team

This is not with the latest release--it is Sitefinity 4.0.  Not sure if that makes a difference.  Is there anyone who can help me with this?  I am supposed to have this done today.

Also, once they select the image from the image manager, how do I pull the image out so i can get its Url, Thumbnail, etc. for use on my custom widget?

Thanks,
Craig

Hello fregas,

Please use the latest version. There are major fixes since 1098. The way that templates are loaded is also changed.

You can get the object id - the dataitem ID and resolve it later with LibrariesManager using Media Modules API. you can also resolve the link by writing a helper js function that is called inside applyChanges

Kind regards,
Ivan Dimitrov
the Telerik team

Ivan,

Unfortunately, we cannot upgrade at this point as we don't have the time/budget from the client.  Clients really don't like hearing that we have to charge them for development time to upgrade sitefinity so that things that should already work actually do.  So i guess we need to tell him that this will have to wait until we upgrade?

Thanks for the help on the modules API--exactly what i needed. 

Hello fregas,

You can install a blank project or LIB and demonstrate the functionality to your customer so it is possible that he decide to upgrade the project and you will be able to keep working taking the benefit of the upgrade and new fixes.

Regards,
Ivan Dimitrov
the Telerik team

I have a multiview custom control, One of the views is a list of text fields, another view allows the user to upload an image from his computer using the MediaContentUploaderView control, and the next allows the user to select an image that's already been uploaded, using MediaContentSelectorView control.

I am able to get/ set the fields from the first View, and get the selected image from the third view.. However, I'm not sure what I am supposed to do in the javascript file for the second view.  Every time I browse my computer and select an image to upload, it then pops up the list of Albums I want to add the image to, and then when I click "Save", it does nothing. 

This is my JS file right now:

Type._registerScript(

"GrayBoxControlDesignerView2.js", ["IDesignerViewControl.js"]);

"CustomControls.Designer.Views.GrayBox");

function (element)

this, [element]);

function ()

this, 'initialize');

function ()

this, 'dispose');

// implementation of IDesignerViewControl: Forces the control to refersh from the control Data

function ()

var controlData = this.get_controlData();

// implementation of IDesignerViewControl: forces the designer view to apply the changes on UI to the control Data

function ()

var controlData = this.get_controlData();

// gets the javascript control object that is being designed

function ()

return this.get_parentDesigner().get_propertyEditor().get_control();

function ()

return this._parentDesigner;

// IDesignerViewControl: sets the reference fo the propertyEditor control

function (value)

this._parentDesigner = value;

'CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView2', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);

(typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();


This is the JS file to the third view, which allows the user to select an image that has already been uploaded, and sets it to the Image.  This works just fine.  Do I need to add the itemSelectDelegate/ itemSelect function to my JS file above as I did below?

Type._registerScript(

"GrayBoxControlDesignerView3.js", ["IDesignerViewControl.js"]);

Type.registerNamespace(

"CustomControls.Designer.Views.GrayBox");

var

selectedImageUrl = "";

CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3 =

function (element)

CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.initializeBase(

this, [element]);

this._selectorView = null;

this._itemSelectDelegate = null;

CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.prototype =

initialize:

function ()

CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.callBaseMethod(

this, 'initialize');

this._itemSelectDelegate = Function.createDelegate(this, this._itemSelect);

this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);

,

dispose:

function ()

CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.callBaseMethod(

this, 'dispose');

if (this._selectorView)

this._selectorView.add_onItemSelectCommand(this._itemSelectDelegate);

,

//properties

get_selectorView:

function ()

return this._selectorView;

,

set_selectorView:

function (value)

this._selectorView = value;

,

_itemSelect:

function (sender, args)

var dataItem = args.get_dataItem();

selectedImageUrl = dataItem.MediaUrl;

,

// implementation of IDesignerViewControl: Forces the control to refersh from the control Data

refreshUI:

function ()

var controlData = this.get_controlData();

selectedImageUrl = controlData.ImageURL;

,

// implementation of IDesignerViewControl: forces the designer view to apply the changes on UI to the control Data

applyChanges:

function ()

var controlData = this.get_controlData();

controlData.ImageURL = selectedImageUrl;

,

// gets the javascript control object that is being designed

get_controlData:

function ()

return this.get_parentDesigner().get_propertyEditor().get_control();

,

get_parentDesigner:

function ()

return this._parentDesigner;

,

// IDesignerViewControl: sets the reference fo the propertyEditor control

set_parentDesigner:

function (value)

this._parentDesigner = value;

CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3.registerClass(

'CustomControls.Designer.Views.GrayBox.GrayBoxControlDesignerView3', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);

if

(typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Please let me know.

Thanks!

Also,

I would like to add a view that has the a Content Editor (what is shown in Content Block widget).  What control would I use for this, and what namespace does it belong to? Please let me know ASAP.

Thanks!!

Also, with the Content Editor (Content Block), please let me know how to hook up the JS file with it (applyChanges and refreshUI)... I feel that the documentation lacks a lot of how to use some of the Designer controls & how to hook up the JS files..
Thanks.

Hi Huda,

To your first question: javascript files provide the functionality of the designer. You need to make their build action to Embeded resource and register them in Assemblyinfo.cs

Hi,

Thanks for your response.  I actually already figured out the Content Block/ the JS that goes with that and have that all hooked up and working, Thanks. 

Regarding the Image Selector, I already built all my custom controls according to the Date Picker example.  I already have the necessary files set to Embed Resource and have them registered in the AssemblyInfo.cs... This wasn't my question, as I already am able to build out all sorts of custom controls.  What I did need assistance on though, was what to put in the Apply Changes section of the JS file. There is no documentation on this.  I feel like most of the code I've done , I've had to guess/ research forums, etc.  So if you could assist in how to hook up the JS file, that would be great. Right now, this is what I have:

My template .ascx file  (Set to Embedded Resource)
<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers" TagPrefix="sf" %>
 
<sf:MediaContentUploaderView ID="uploaderView" runat="server"  ContentType="Telerik.Sitefinity.Libraries.Model.Image"  ParentType="Telerik.Sitefinity.Libraries.Model.Album">
     
</sf:MediaContentUploaderView>


My .cs File
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Sitefinity.Web.UI;
using System.Collections.Generic;
using Telerik.Web.UI;
using Telerik.Sitefinity.Web.UI.ControlDesign;
using Telerik.Sitefinity.Modules.Libraries.Web.UI.Designers;
using Telerik.Sitefinity.Modules.Libraries.Images;
using Telerik.Sitefinity.Localization;


namespace CustomControls.Designer.Views.PageHeader

    class PageHeaderDesignerView : ContentViewDesignerView
   
        public override string ViewTitle
       
            get
           
                return "Image – Upload new";
           
       

        public override string ViewName
       
            get
           
                return this.GetType().Name;
           
       

        protected virtual MediaContentUploaderView UploaderView
       
            get
           
                return this.Container.GetControl<MediaContentUploaderView>("uploaderView", true);
           
       

        public override IEnumerable<ScriptDescriptor> GetScriptDescriptors()
       
            var descriptor = new ScriptControlDescriptor(typeof(PageHeaderDesignerView).FullName, this.ClientID);
            descriptor.AddComponentProperty("selectorView", this.UploaderView.ClientID);

            return new[] descriptor ;
       

        public override IEnumerable<ScriptReference> GetScriptReferences()
       
            return new List<ScriptReference>()
           
               new ScriptReference("Telerik.Sitefinity.Web.UI.ControlDesign.Scripts.IDesignerViewControl.js",
                                     typeof(Telerik.Sitefinity.Web.UI.Fields.TextField).Assembly.GetName().ToString()),
                new ScriptReference("CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.js", typeof(PageHeaderDesignerView).Assembly.GetName().ToString())
            ;
       

        protected override string LayoutTemplateName
       
            get
           
                return "CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.ascx";
           
       

        protected override void InitializeControls(GenericContainer container)
       
            string itemsName = Res.Get<ImagesResources>().Images;
            string itemName = Res.Get<ImagesResources>().Image;
            string itemNameWithArticle = Res.Get<ImagesResources>().ImageWithArticle;
            string libName = Res.Get<ImagesResources>().Album;

            this.UploaderView.LibraryName = libName;
            this.UploaderView.ItemsName = itemsName;
            this.UploaderView.ItemName = itemName;
            this.UploaderView.ItemNameWithArticle = itemNameWithArticle;
            this.UploaderView.DisplayAltTextField = false;
            this.UploaderView.DisplayTitleTextField = false;
            this.UploaderView.DisplayResizingOptionsControl = false;
            this.UploaderView.ShowOpenOriginalSizeCheckBox = false;
       

        protected override HtmlTextWriterTag TagKey
       
            get
           
                //we use div wrapper tag to make easier common styling
                return HtmlTextWriterTag.Div;
           
       
   



My .js file (set to Embedded Resource) ******************THIS IS WHAT I NEED HELP ON*************************************
Type._registerScript("PageHeaderDesignerView.js", ["IDesignerViewControl.js"]);
Type.registerNamespace("CustomControls.Designer.Views.PageHeader");

CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView = function (element)
    CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.initializeBase(this, [element]);        
        this._selectorView = null;


CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.prototype =
    initialize: function ()
        CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.callBaseMethod(this, 'initialize');

    ,
    dispose: function ()
        CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.callBaseMethod(this, 'dispose');
    ,

    get_selectorView: function ()
        return this._selectorView;
    ,
    set_selectorView: function (value)
        this._selectorView = value;
    ,

    // implementation of IDesignerViewControl: Forces the control to refersh from the control Data
    refreshUI: function ()
        var controlData = this.get_controlData();
    ,

    // implementation of IDesignerViewControl: forces the designer view to apply the changes on UI to the control Data
    applyChanges: function ()
        var controlData = this.get_controlData();
    ,

    // gets the javascript control object that is being designed
    get_controlData: function ()
        return this.get_parentDesigner().get_propertyEditor().get_control();
    ,
    get_parentDesigner: function ()
        return this._parentDesigner;
    ,

    // IDesignerViewControl: sets the reference fo the propertyEditor control
    set_parentDesigner: function (value)
        this._parentDesigner = value;
   


CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView.registerClass('CustomControls.Designer.Views.PageHeader.PageHeaderDesignerView', Sys.UI.Control, Telerik.Sitefinity.Web.UI.ControlDesign.IDesignerViewControl);

if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();


I'd like the image to be uploaded once I click "Save".. and I'd like that image that was just updated to be set to the Image URL property of the control data (controlData.ImageURL).  So I need help with the applyChanges function, and any other functions I need to add....

I have another view in this control with the MediaContentSelectorView and I hooked all of that up, and I have another view with the ContentBlock editor, and other text fields, and that's all hooked up, I'm just unsure on the Javascript of the Image Selector, which is what I need help on... Again, I already know how to hook everything up in terms of the Embedded Resources, the AssemblyInfo.cs, the Control Data, etc. as I have built several custom controls with designers. Just need help on the JS.

Thanks!

Hi Guys,