How to get Image manager's upload button's click event.

[anand]

HI,
       I have a Rad editor and a Rad rotator on a page. Whenever anybody uploads an image using image manager and closes it, I want to refresh the rad rotator to show the newly uploaded images. The images for a each users are saved in user specific folder.i.e. viewpath,uploadpath is set to this folder. How can I do this?

[Slav]

Hi Anand,

The implementation of the requested scenario will be not trivial.
The contents of the RadEditor's dialogs along with the Upload control, reside in an iframe, which is another document. In order to upload a file to the server, the behavior of the upload control is to refresh (update) the page. This is visible inside the Image Manager dialog. However, this process will not update the parent page where RadRotator resides and the rotator will still show its predefined set of images after the upload.

It is important to know that you need to initiate Postback of the page if you want to update the RadRotator when new image is uploaded in RadEditor. It is up to you to decide how to update the parent page. The following KB article shows how to get a reference to the Upload control:
http://www.telerik.com/support/kb/aspnet-ajax/editor/displaying-single-upload-control-in-the-filebrowser-upload-manager.aspx, e.g.

protected void Page_Load(object sender, System.EventArgs args)

{

Telerik.Web.UI.RadFileExplorer rfe = (Telerik.Web.UI.RadFileExplorer)this.FindRadControl(this.Page);

if (rfe != null)

{

Telerik.Web.UI.RadUpload upload =  rfe.Upload;

}

}

You can also postback the parent page when closing the Image manager. This is achievable with client-side code. In this case OnClientLoad and OnClientPasteHtml events will do the job:

<script type="text/javascript">
            function dialogClosed(sender, args) {
                if (args.get_navigateUrl().indexOf("ImageManager")) {
                    __doPostBack();
                }
            }

            function editorClientLoad(editor) {
                editor.get_dialogOpener().add_close(dialogClosed);
            }
            // OnClientLoad handler


            function OnClientPasteHtml(editor, args) {
                if (args.get_commandName() == "ImageManager") {
                    __doPostBack();
                }
            }
            // OnClientPasteHtml handler
</script>

Finally you should define DataSource for the RadRotator:

protected void Page_Load(object sender, EventArgs e)
    {
        RadRotator1.DataSource = GetFilesInFolder("~/Images");// Set datasource
        RadRotator1.DataBind();
    }

The method GetFilesInFolder, used above, returns a List collection containing paths to the images. 



Best wishes,
Slav
the Telerik team

[anand]

Thank you very much Slav the solution worked perfectly fine.

I have another problem with the two controls:-
   
I am showing thumbnails of images(stored in ~\images\thumbnails\xyz_thumbnail.jpg) in RadRotator and when anybody drags and drops the thumbnail from the rotator into radeditor, then I need the main image(~\images\xyz.jpg) to be placed into the rad editor and not the thumbnail. I have implemented the OnItemClicked event and that works perfectly fine but now I need a way to handle this for client side drag drop. How do I do this?

[Slav]

Hello Anand,

You could capture the drop event of the content area of RadEditor in order to achieve this.
Below is a simple demo for implementing drag and drop using the OnClientLoad client-side handler from the example in my previous post.

function editorClientLoad(editor, args) {

                editor.get_dialogOpener().add_close(dialogClosed);

                                                 var element = document.all ? editor.get_document().body : editor.get_document();

                $telerik.addExternalHandler(element, "drop", function (e) {

                    setTimeout(function () {

                        var currentElement = editor.getSelectedElement(); //get reference to the selected element

                        if (currentElement.tagName == "IMG")//check if the element is a IMG

                        {

                            currentElement.parentNode.innerHTML = currentElement.outerHTML; // paste the image

                        }

                    }, 0);

 

                });

 

}

// OnClientLoad handler

Note that the above is just an example how to attach a function to the drop event, but not a fully functional solution for your scenario. Keep in mind that there might be other HTML elements dragged into the editor along with the image - you can't control this behavior of the browser.

I hope the provided solution gives answer to your question.

Kind regards,
Slav
the Telerik team

[anand]

Hi,
Thanks Slav, solution for the second issue worked.
But i found an issue in first post.
If I do a postback in the dialogClosed or OnClientPasteHtml event then, the image that is being inserted by the image manager is lost after the postback.
What can be done for this?

[Slav]

Hello Anand,

The issue you mentioned occurs because on dialogClosed and OnClientPasteHtml events full page postback is initiated before the content of RadEditor is saved, as this content is saved when the form is submitted and not when a postback is initiated through code. This is why I recommend updating only the RadRotator through Ajax request, which will also lead to less page loading.

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="OnAjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadRotator1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
</telerik:RadAjaxManager>

Replace __doPostBack() with the function call, marked below:

<script type="text/javascript">
            function dialogClosed(sender, args) {
                if (args.get_navigateUrl().indexOf("ImageManager")) {
                    $find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("updateRotator"); // innitiate AJAX request
                }
            }

            function editorClientLoad(editor) {
                editor.get_dialogOpener().add_close(dialogClosed);
            }
</script>

The OnClientPasteHtml event handler is not needed, as dialogClosed event is executed even when HTML is inserted in the content of the editor, so you should remove it.

In code-behind rebind the data source of RadRotator when AJAX request occurs:

protected void OnAjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "updateRotator")
        {
            RadRotator1.DataSource = GetFilesInFolder("~/Images");// Set datasource
            RadRotator1.DataBind();
        }
    }

I have also attached a sample project, demonstrating the solution, explained above.

Greetings,
Slav
the Telerik team