saveImageOnClient issue

[Martin Roussel]

Hi, Ive noticed that my RadImageEditor stopped working when saving images. It was the first time I tried it after upgrading to Q3 2012 and im almost sure it was working as expected before. I use a custom button on the toolbar in order to save the images on client side. When I click the button, the query strings that were passed from the calling page seem to be overwritten by the control. In fact, when page first loads (Page_Load), my strings are this:

Request.QueryString["myFileLocation"] = "http://www.rbc.com/community-sustainability/_assets-custom/images/RBC_BWP_Wallpaper_1600X1200_EN.jpg"

Request.QueryString["myFileName"] = ""

When I click the save button, I get this (still in Page_Load):
Request.QueryString["myFileLocation"] = "http://www.rbc.com/community-sustainability/_assets-custom/images/Telerik.Web.UI.WebResource.axd?type=iec"

Request.QueryString["myFileName"] = null

Here is the code to reproduce it. You need to call the page using query strings like this:

http://localhost:PORT/Test3.aspx?myFileLocation=http://www.rbc.com/community-sustainability/_assets-custom/images/RBC_BWP_Wallpaper_1600X1200_EN.jpg&myFileName=

Test3.aspx

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                        <telerik:RadImageEditor ID="RadImageEditor1" runat="server" StatusBarMode="Top" ToolsLoadPanelType="AjaxPanel">
                            <Tools>
                                <telerik:ImageEditorToolGroup>
                                    <telerik:ImageEditorTool CommandName="Print" />
                                    <telerik:ImageEditorTool ImageUrl="~/Images/Icons/Floppy.png" Text="Download" meta:resourcekey="ImageEditorDownload" CommandName="CustomDownload" />
                                </telerik:ImageEditorToolGroup>
                                <telerik:ImageEditorToolGroup>
                                    <telerik:ImageEditorToolStrip CommandName="Undo" />
                                    <telerik:ImageEditorToolStrip CommandName="Redo" />
                                    <telerik:ImageEditorTool CommandName="Reset" />
                                </telerik:ImageEditorToolGroup>
                                <telerik:ImageEditorToolGroup>
                                    <telerik:ImageEditorTool CommandName="Crop" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="Resize" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="Zoom" />
                                    <telerik:ImageEditorTool CommandName="ZoomIn" />
                                    <telerik:ImageEditorTool CommandName="ZoomOut" />
                                    <telerik:ImageEditorTool CommandName="Opacity" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="Rotate" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="RotateRight" />
                                    <telerik:ImageEditorTool CommandName="RotateLeft" />
                                    <telerik:ImageEditorTool CommandName="Flip" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="FlipVertical" />
                                    <telerik:ImageEditorTool CommandName="FlipHorizontal" />
                                    <telerik:ImageEditorTool CommandName="AddText" IsToggleButton="true" />
                                    <telerik:ImageEditorTool CommandName="InsertImage" IsToggleButton="true" />
                                </telerik:ImageEditorToolGroup>
                            </Tools>
                        </telerik:RadImageEditor>

                        <script type="text/javascript">
                            Telerik.Web.UI.ImageEditor.CommandList["CustomDownload"] = function (imageEditor, commandName, args) {
                                imageEditor.saveImageOnClient("Image");
                            }
                         </script>


                    </telerik:RadAjaxPanel>

Test3.aspx.cs

protected void Page_Load(object sender, System.EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //check Request.QueryString["myFileLocation"] and Request.QueryString["FileName"] here after save click
            }
        }

Also, is it normal that the save is creating a page reload (IsPostBack="false")? Im not sure if the real problem here is this query string "contamination" or if before Q3 2012, the save click was creating a postback instead (IsPostBack=true) ...which is surely changing my logic.

TIA

Martin

[Dobromir]

Hi Martin,

Thank you for bringing this problem to our attention. I have logged it into our database and we will do our best to have it fixed for one of the upcoming releases.

For the time being, as a workaround you can overwrite EditableImage and EditableCanvas saveOnClient methods like follows:

Telerik.Web.UI.ImageEditor.EditableCanvas.prototype.saveOnClient = function(fileName)
{
    var dkey = fileName ? "&fileName=" + fileName + "&dkey=2" : "&dkey=2";

    var location = document.location.protocol + "//" + document.location.host + document.location.pathname;
    location = location.substring(0, location.lastIndexOf("/") + 1) + "Telerik.Web.UI.WebResource.axd?type=iec" + dkey;

    this._downloadImg(location);
}

Telerik.Web.UI.ImageEditor.EditableImage.prototype.saveOnClient = function(fileName)
{
    var url = this.get_url();
    if(url)
    {
        var dkey = fileName ? "&fileName=" + fileName + "&dkey=" : "&dkey=";
        if(url.indexOf("Telerik.Web.UI.WebResource.axd?type=iec") != -1)
        {
            document.location = url + dkey + "1";
        }
        else
        {
            var location = document.location.protocol + "//" + document.location.host + document.location.pathname;

            location = location.substring(0, location.lastIndexOf("/")+1);
            document.location = location + "Telerik.Web.UI.WebResource.axd?type=iec" + dkey + this._imageEditor._downloadKey;
        }
    }
}

As a small toke of gratitude I have updated your Telerik points accordingly.

Regards,
Dobromir
the Telerik team

[Martin Roussel]

Thank you. Did you logged it in the PITS? Link to track it?

Martin

[Vessy]

Hi Martin,

We have logged this internally but I made it a PITS issue so that you can track its progress here: PITS.

All the best,
Vesi
the Telerik team