Problem with FileBrowser and Image Manager

2 posts, 0 answers
  1. Mike
    Mike avatar
    24 posts
    Member since:
    Jul 2008

    Posted 11 May 2009 Link to this post

    Hi,

    I am having a problem with integrating the FileBrowser.ascx and ImageManager.ascx control files into a normal ASPX page. I have included the code below. Basically, rather than having this in a popup i want to render the filebrowser with the image manager in a normal aspx page. This will be connected to a sql server DB where all images will be uploaded to and managed there.

    Can anyone shed some light on this subject for me, I have been battling with this for some time now and would like to get this working.

    Thank you for your help :)

    Grant

    <%@ Page Language="C#" MasterPageFile="~/Admin/Admin.master" AutoEventWireup="true" CodeFile="ImageManager.aspx.cs" Inherits="Admin_ImageManager" Title="Untitled Page" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Editor.DialogControls"
        TagPrefix="dc" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Widgets" TagPrefix="widgets" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Dialogs" TagPrefix="dialogs" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">


        <script type="text/javascript">
    Type.registerNamespace("Telerik.Web.UI.Editor.DialogControls");

    Telerik.Web.UI.Editor.DialogControls.FileBrowser = function(element)
    {
    Telerik.Web.UI.Editor.DialogControls.FileBrowser.initializeBase(this, [element]);
    }

    Telerik.Web.UI.Editor.DialogControls.FileBrowser.prototype = {
    initialize: function()
    {
    this.set_insertButton($get("InsertButton"));
    this.set_cancelButton($get("CancelButton"));

    var previewer = this.get_previewerType();
    var previewerType = eval("Telerik.Web.UI.Widgets." + previewer);
    $create(previewerType, { "browser": this }, null, null, $get(previewer));
    this.set_filePreviewer($find(previewer));
    this.set_fileBrowser($find("RadFileExplorer1"));

    Telerik.Web.UI.Editor.DialogControls.FileBrowser.callBaseMethod(this, 'initialize');
    },

    dispose: function()
    {
    Telerik.Web.UI.Editor.DialogControls.FileBrowser.callBaseMethod(this, 'dispose');
    this._insertButton = null;
    this._cancelButton = null;
    }
    }

    Telerik.Web.UI.Editor.DialogControls.FileBrowser.registerClass('Telerik.Web.UI.Editor.DialogControls.FileBrowser', Telerik.Web.UI.Widgets.FileManager);

    Type.registerNamespace("Telerik.Web.UI.Widgets");

    Telerik.Web.UI.Widgets.ImagePreviewer = function(element)
    {
    Telerik.Web.UI.Widgets.ImagePreviewer.initializeBase(this, [element]);
    this._tab = null;
    this._tabClickDelegate = null;
    this._multiPage = null;
    this._imageProperties = null;
    this._imageContainer = null;
    this._cleanImageContainer = null;
    this._previewedImage = null;
    this._containerBounds = null;
    this._originalBounds = null;
    this._toolbarClickDelegate = null;
    this._currentItem = "";
    this._selectedFileName = null;
    this._browser = null;
    }

    Telerik.Web.UI.Widgets.ImagePreviewer.prototype = {
    initialize: function()
    {
    Telerik.Web.UI.Widgets.ImagePreviewer.callBaseMethod(this, 'initialize');
    this._initializeChildren();
    this._initNoImageItem();
    },

    get_enableImageEditor: function()
    {
    return this._browser.get_enableImageEditor();
    },

    get_imageEditorFileSuffix: function()
    {
    return this._browser.get_imageEditorFileSuffix();
    },

    _initializeChildren: function()
    {
    this._tab = $find("imageTabStrip");
    this._multiPage = $find("imageMultiPage");
    this._imageContainer = this.get_element();
    this._containerBounds = $telerik.getContentSize(this._imageContainer);
    this._cleanImageContainer = $get("CleanImageContainer");

    this._toolbar = $find("ImagePreviewToolBar");
    this._toolbarClickDelegate = Function.createDelegate(this, this._toolbarClickHandler);
    this._toolbar.add_buttonClicked(this._toolbarClickDelegate);
    this._selectedFileName = $get("selectedFileName");
    this._imageProperties = $find("ImageProperties");
    },

    dispose: function()
    {
    this._toolbarClickDelegate = null;
    this._selectedFileName = null;
    Telerik.Web.UI.Widgets.ImagePreviewer.callBaseMethod(this, 'dispose');
    },

    _setTabsEnabled: function(enabled)
    {
    this._tab.get_tabs().forEach(function(item)
    {
    item.set_enabled(enabled);
    });
    },

    /* toolbar related code */
    _toolbarClickHandler: function(sender, args)
    {
    var buttonValue = args._item.get_value();
    switch (buttonValue)
    {
    case "BestFit":
    this._fitImage();
    break;
    case "ActualSize":
    this._adjustImage(this._originalBounds);
    break;
    case "ZoomIn":
    this._zoom(80);
    break;
    case "ZoomOut":
    this._zoom(-40);
    break;
    case "ImageEditor":
    this._openImageEditor();
    break;
    }
    },

    _setToolbarEnabled: function(enabled)
    {
    this._toolbar.get_items().forEach(function(item)
    {
    item.set_enabled(enabled);
    });
    },

    /* zoom related code */
    _zoom: function(zoomFactor)
    {
    this._adjustImage(this._getZoomedSize($telerik.getBounds(this._previewedImage), zoomFactor));
    },

    _getZoomedSize: function(size, zoomFactor)
    {
    return {
    width: size.width * (1 + zoomFactor / 100),
    height: size.height * (1 + zoomFactor / 100)
    }
    },

    _adjustImage: function(size)
    {
    var containerBounds = this._containerBounds;
    var topMargin = containerBounds.height - size.height;

    topMargin = topMargin < 0 ? 0 : Math.floor(topMargin / 2);
    //The image has CSS class set that wraps it in 1 px border.
    //This border can cause scrollbars to appear on parent if image height is equal to container height
    if (topMargin <= 2) topMargin = 0;

    this._previewedImage.width = size.width;
    this._previewedImage.height = size.height;

    this._previewedImage.style.marginTop = topMargin + "px";
    },

    _fitImage: function()
    {
    var imageBounds = this._originalBounds;
    var wrapperBounds = this._containerBounds;

    var hRatio = imageBounds.height / wrapperBounds.height;
    var wRatio = imageBounds.width / wrapperBounds.width;

    var ratio = 1;

    if (imageBounds.width > wrapperBounds.width && imageBounds.height > wrapperBounds.height)
    {
    ratio = hRatio >= wRatio ? hRatio : wRatio;
    }
    else if (imageBounds.width > wrapperBounds.width)
    {
    ratio = wRatio;
    }
    else if (imageBounds.height > wrapperBounds.height)
    {
    ratio = hRatio;
    }

    this._adjustImage({ width: Math.floor(imageBounds.width / ratio), height: Math.floor(imageBounds.height / ratio) - 4 });
    },

    /* image editor related code */
    _openImageEditor: function()
    {
    var selectedItem = this._currentItem;
    if (selectedItem != null && (selectedItem.get_permissions() & Telerik.Web.UI.FileExplorerItemPermissions.Upload) && selectedItem.get_type() == Telerik.Web.UI.FileExplorerItemType.File)
    {
    var browser = this.get_browser();
    var args = {};
    args.imageSrc = selectedItem.get_url();
    args.suffix = this.get_imageEditorFileSuffix();
    args.name = selectedItem.get_name();
    var callbackFunction = function(sender, args)
    {
    var newSrc = null;
    if (args && args.get_newImageSrc)
    {
    newSrc = args.get_newImageSrc();
    }
    if (newSrc)
    {
    newSrc = newSrc.substring(newSrc.lastIndexOf("/")+1);
    browser.get_fileBrowser().refresh(newSrc);
    }
    }
    var dialogOpener = Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().get_dialogOpener();
    dialogOpener.open("ImageEditor", args, callbackFunction);
    }
    },

    _checkImageEditorDisplay: function()
    {
    var imageEditorItem = this._toolbar.findItemByValue("ImageEditor");
    if (imageEditorItem)
    {
    var selectedItem = this._currentItem;
    var hasPermission = this.get_enableImageEditor() ? selectedItem != null && (selectedItem.get_permissions() & Telerik.Web.UI.FileExplorerItemPermissions.Upload) : false;
    imageEditorItem.set_enabled(hasPermission ? true : false);
    }
    },

    /* previewer related code */
    setItem: function(item)
    {
    this._currentItem = item;
    if (item.get_type() == Telerik.Web.UI.FileExplorerItemType.Directory)
    {
    this._initNoImageItem();
    }
    else
    {
    this._initImageItem(item.get_url());
    }
    },

    getResult: function()
    {
    var newImage = this._imageProperties.getModifiedImage();
    if (newImage == null && this._currentItem)
    {
    //for example if image size is large and the user clicks insert before it is loaded.
    newImage = new Image();
    newImage.src = this._currentItem.get_url();
    newImage.setAttribute("alt","");
    }
    return newImage;
    },

    getClonedImage: function(src)
    {
    var img = new Image();
    img.src = src;
    //Add to DOM so as to have width and height - else it returns zero
    this._cleanImageContainer.innerHTML = "";
    this._cleanImageContainer.appendChild(img);
    return img;
    },

    _initImageItem: function(src)
    {
    var img = new Image();
    this._previewedImage = img;

    var displayName = (src.length > 0 && src.indexOf("/") != -1) ? src.substr(src.lastIndexOf("/") + 1, src.length - 1) : src;
    src = encodeURI(src);
    img.style.border = "0";
    img.style.position = "absolute";
    img.style.top = "-10000px";
    img.style.left = "-10000px";

    this._selectedFileName.innerHTML = displayName;
    this._imageContainer.innerHTML = "";
    this._imageContainer.className = "imagePreview";
    this._imageContainer.appendChild(this._previewedImage);
    this._setToolbarEnabled(true);
    this._setTabsEnabled(true);
    this._checkImageEditorDisplay();

    //Force a loading handler - it will be called any time we set src to the image, even if it is cached
    //IMPORTANT! IE executes the load handler for CACHED images right after the handler is attached!
    //So, to ensure that all works OK, the image must be initialized and added to the parent container prior to setting the handler
    $addHandlers(img, { "load": this._imageLoadHandler }, this);
    img.src = src;
    },

    _imageLoadHandler: function(e)
    {
    //Clear the event handler, because otherwise in FireFox (and/or IE) there is infinite recursion
    //NEW: Amazingly in some unclear cases, e.target is null!
    //if (e && e.target) $clearHandlers(e.target);
    this._setupPreviewedImage();
    },

    _setupPreviewedImage: function(skipCompleteCheck)
    {
    var img = this._previewedImage;
    img.style.position = "";
    img.style.top = "";
    img.style.left = "";

    this._originalBounds = { width: img.width, height: img.height };
    this._fitImage();

    //Configure the image previewer property pane. Make sure its main initialization function clientInit is called just once
    var cleanImg = this.getClonedImage(this._previewedImage.getAttribute("src", 2));
    var initialItem = this.get_browser().get_initialItem();
    if (initialItem && initialItem.getAttribute)
    {
    var cleanSrc = cleanImg.getAttribute("src", 2);
    var initialSrc = initialItem.getAttribute("src", 2);
    if (cleanSrc.length > 0 && initialSrc.length > 0 && initialSrc.indexOf(cleanSrc) == initialSrc.length - cleanSrc.length)
    {
    cleanImg = initialItem;
    this.get_browser().set_initialItem(null);
    }
    }
    this._imageProperties.loadImageProperties(cleanImg);
    },

    _initNoImageItem: function()
    {
    this._previewedImage = null;
    this._originalBounds = null;
    this._imageContainer.className = "imagePreview noImage";
    this._imageContainer.innerHTML = "&nbsp;";
    this._selectedFileName.innerHTML = "&nbsp;";
    this._setToolbarEnabled(false);
    this._tab.set_selectedIndex(0);
    this._setTabsEnabled(false);
    }
    }

    Telerik.Web.UI.Widgets.ImagePreviewer.registerClass('Telerik.Web.UI.Widgets.ImagePreviewer', Telerik.Web.UI.Widgets.FilePreviewer);
        
        </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="HeadingPlaceHolder" Runat="Server">
       Image Management
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="MainContentHolder" Runat="Server">

        <table class="reDialog ManagerDialog NoMarginDialog" border="0" cellpadding="0" cellspacing="0"
            style="width: 100%;">
            <tr id="listRow">
                <td rowspan="2" class="FileExplorerPlaceholder">
                    <telerik:RadFileExplorer ID="RadFileExplorer1" Height="400px" Width="400px" TreePaneWidth="150px"
                        runat="Server" EnableOpenFile="false" />
                </td>
                <td rowspan="2" class="DialogSeparator">
                    &nbsp;
                </td>
                <td style="width: 100%; vertical-align: top; padding: 0; height: 372px;">
                    <asp:PlaceHolder ID="PreviewerPlaceHolder" runat="server">
                        <div class="imagePreview">
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <telerik:RadToolBar ID="ImagePreviewToolBar" runat="Server" Height="29px" Width="259px">
                                            <Items>
                                                <telerik:RadToolBarButton Text="Image Editor" ToolTip="Image Editor" Value="ImageEditor"
                                                    Enabled="false" CssClass="icnImageEditor" />
                                                <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Best Fit" Value="BestFit" Enabled="false"
                                                    CssClass="rtbIconOnly icnBestFit" />
                                                <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Actual Size" Value="ActualSize"
                                                    Enabled="false" CssClass="rtbIconOnly icnActualSize" />
                                                <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Zoom In" Value="ZoomIn" Enabled="false"
                                                    CssClass="rtbIconOnly icnZoomIn" />
                                                <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Zoom Out" Value="ZoomOut" Enabled="false"
                                                    CssClass="rtbIconOnly icnZoomOut" />
                                            </Items>
                                        </telerik:RadToolBar>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadMultiPage ID="imageMultiPage" runat="server">
                                            <telerik:RadPageView ID="previewPage" runat="server" Selected="true">
                                                <table cellpadding="0" cellspacing="0" width="100%">
                                                    <tr>
                                                        <td>
                                                            <div id="selectedFileName" class="selectedFileName">
                                                                &nbsp;</div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td valign="middle">
                                                            <div id="CleanImageContainer" style="position: absolute; width: 0px; height: 0px;
                                                                overflow: hidden;">
                                                            </div>
                                                            <div id="ImagePreviewer" class="imagePreview noImage">
                                                                &nbsp;</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </telerik:RadPageView>
                                            <telerik:RadPageView ID="propertiesPage" runat="server">
                                                <dc:SetImagePropertiesDialog ID="ImageProperties" runat="server" StandAlone="false">
                                                </dc:SetImagePropertiesDialog>
                                            </telerik:RadPageView>
                                        </telerik:RadMultiPage>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <telerik:RadTabStrip ID="imageTabStrip" Width="100%" runat="server" Orientation="HorizontalBottom"
                                            ShowBaseLine="true" MultiPageID="imageMultiPage">
                                            <Tabs>
                                                <telerik:RadTab Text="Preview" Value="Preview" Selected="true" />
                                                <telerik:RadTab Text="Properties" Value="Properties" />
                                            </Tabs>
                                        </telerik:RadTabStrip>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    
                    </asp:PlaceHolder>
                </td>
            </tr>
            <tr>
                <td class="reBottomcell">
                    <table border="0" cellpadding="0" cellspacing="0" class="reConfirmCancelButtonsTbl">
                        <tr>
                            <td>
                                <button type="button" id="InsertButton">

                                    <script type="text/javascript">setInnerHtml("InsertButton", localization["Insert"]);</script>

                                </button>
                            </td>
                            <td class="reRightMostCell">
                                <button type="button" id="CancelButton">

                                    <script type="text/javascript">setInnerHtml("CancelButton", localization["Cancel"]);</script>

                                </button>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        
    </asp:Content>
  2. Rumen
    Admin
    Rumen avatar
    14323 posts

    Posted 14 May 2009 Link to this post

    Hi Grant,

    The ascx dialog files could not be used directly in an aspx page. These dialog files accept and configure parameters from the parent page and it is not possible to directly add them to an aspx page.

    If you would like you can use the Image and Document managers as a standalone dialogs by following the instructions provided in this KB article: Using the Image and Document managers outside RadEditor.


    Kind regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top